Date Format Adjustment

May 30, 2025 · AI Conversations

User
Assistant
To format the date as `January 14, 2024`, you need to pass a custom format string to `date_i18n()`. Here's the corrected code:

<span class="review-date">
    <?php echo $review_data['date']; 
    if (isset($options['show_date']) && $options['show_date'] == 'yes' && strtotime($review_data['date']) > 0): ?>
        <?php self::show_single_review_divider($divider, $review_data); ?>
        <span class="kk-single-review-date" itemprop="dateCreated">
            <?php echo date_i18n( 'F j, Y', strtotime( esc_html($review_data['date']) ) ); ?>
        </span>
    <?php else: ?>
        <meta itemprop="dateCreated" content="<?php echo esc_html($review_data['date']); ?>">
    <?php endif; ?>
</span>

### Breakdown:
– `'F j, Y'` is the PHP date format for `January 14, 2024`:
– `F` = Full month name
– `j` = Day of the month (no leading zeros)
– `Y` = 4-digit year

Let me know if you also want to include the time.

User
write now its coming like this 2025-05-28T10:12:30.902Z

do it in this way January 14, 2024
I dont want to show time !
please correct it asap!

Assistant
To convert and display a date like `2025-05-28T10:12:30.902Z` in the format `January 14, 2024` (without the time), **you need to parse the ISO 8601 datetime string** properly using `strtotime()`.

Here is your corrected and finalized code:

<span class="review-date">
    <?php 
    if (isset($options['show_date']) && $options['show_date'] === 'yes' && strtotime($review_data['date']) > 0): ?>
        <?php self::show_single_review_divider($divider, $review_data); ?>
        <span class="kk-single-review-date" itemprop="dateCreated">
            <?php echo date_i18n( 'F j, Y', strtotime( $review_data['date'] ) ); ?>
        </span>
    <?php else: ?>
        <meta itemprop="dateCreated" content="<?php echo esc_html($review_data['date']); ?>">
    <?php endif; ?>
</span>

### ✅ This will:
– Convert `2025-05-28T10:12:30.902Z` to `May 28, 2025`
– Not show the time
– Use `date_i18n()` with `'F j, Y'` format for proper localization

Let me know if you need this format to support a different language (localization).

User
this is how its showing !
Assistant
Thanks for the clarification. The reason you're still seeing:

<span class="review-date">
    <meta itemprop="dateCreated" content="2025-05-28T11:51:24.567Z">
</span>

…is because your code falls into the **`else` block**, meaning this condition is **not passing**:

if (isset($options['show_date']) && $options['show_date'] === 'yes' && strtotime($review_data['date']) > 0)

### ✅ To always show the formatted date like `January 14, 2024` (and not the raw ISO string), you can **force the output** like this:

<span class="review-date">
    <?php
    $raw_date = $review_data['date'];
    $formatted_date = date_i18n('F j, Y', strtotime($raw_date));

    // Always show formatted date and fallback meta
    echo '<span class="kk-single-review-date" itemprop="dateCreated">' . esc_html($formatted_date) . '</span>';
    echo '<meta itemprop="dateCreated" content="' . esc_attr($raw_date) . '">';
    ?>
</span>

### ✅ Output:
This will output something like:

<span class="review-date">
    <span class="kk-single-review-date" itemprop="dateCreated">May 28, 2025</span>
    <meta itemprop="dateCreated" content="2025-05-28T11:51:24.567Z">
</span>

Let me know if you want to **completely remove the “ tag** as well.

User
Lees verder

arrange it better!

Assistant
Here’s a cleaner and semantically structured version of your “ tag with proper spacing, indentation, and best practices:

<a href="#" class="lees-verder-link">
    Lees verder
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none" aria-hidden="true" focusable="false">
        <path d="M13.0306 6.50144L8.53063 11.0014C8.38973 11.1423 8.19863 11.2215 7.99938 11.2215C7.80012 11.2215 7.60902 11.1423 7.46813 11.0014C7.32723 10.8605 7.24807 10.6694 7.24807 10.4702C7.24807 10.2709 7.32723 10.0798 7.46813 9.93894L10.6875 6.72081H1.5C1.30109 6.72081 1.11032 6.64179 0.96967 6.50114C0.829018 6.36049 0.75 6.16972 0.75 5.97081C0.75 5.7719 0.829018 5.58113 0.96967 5.44048C1.11032 5.29983 1.30109 5.22081 1.5 5.22081H10.6875L7.46937 2.00081C7.32848 1.85992 7.24932 1.66882 7.24932 1.46956C7.24932 1.27031 7.32848 1.07921 7.46937 0.938313C7.61027 0.797416 7.80137 0.718262 8.00062 0.718262C8.19988 0.718262 8.39098 0.797416 8.53187 0.938313L13.0319 5.43831C13.1018 5.50808 13.1573 5.59098 13.1951 5.68225C13.2329 5.77352 13.2523 5.87135 13.2522 5.97013C13.252 6.06892 13.2324 6.16671 13.1944 6.25789C13.1564 6.34906 13.1007 6.43183 13.0306 6.50144Z" fill="#052626"/>
    </svg>
</a>

### ✅ Enhancements:
– Added `class="lees-verder-link"` for styling purposes (you can change or remove it).
– Added `aria-hidden="true"` and `focusable="false"` to the SVG for accessibility.
– Cleaned up spacing and indentation for readability.

Let me know if you'd like to style it with hover effects or spacing between the text and the icon!

User
make it owl slider , which will show no navigation , only slide from left to right!
Assistant
To convert your “ block into an **Owl Carousel slider** that slides left-to-right **without navigation controls**, follow these steps:

—

### ✅ 1. **Wrap your reviews in an Owl Carousel container**

Update your HTML:

<div class="kk-reviews-grid owl-carousel owl-theme">
    <?php 
    $review_count = 1; 
    foreach ($data['reviews'] as $review_data):

        if (isset($options['id']) && !empty($options['id']) && $options['id'] != $review_data['id']) continue;
        if (isset($options['review_display_options']['hide_without_rating']) && $options['review_display_options']['hide_without_rating'] == 1 && empty($review_data['total_score'])) continue;
        if (isset($options['review_display_options']['hide_without_rating_text']) && $options['review_display_options']['hide_without_rating_text'] == 1 && empty($review_data['positive'])) continue;
        if (isset($options['review_display_options']['hide_without_author']) && $options['review_display_options']['hide_without_author'] == 1 && empty($review_data['name'])) continue;
        if (isset($options['show_reviews_rating_higher_than']) && !empty($options['show_reviews_rating_higher_than']) && !empty($review_data['total_score']) && $review_data['total_score'] < floatval($options['show_reviews_rating_higher_than'])) continue;
        if (isset($options['start_with_review']) && !empty($options['start_with_review']) && $options['start_with_review'] > $review_count) {
            $review_count++;
            continue;
        }

        if (isset($options['show_reviews_amount']) && is_numeric($options['show_reviews_amount']) && $options['show_reviews_amount'] > 0 && $review_count > $options['show_reviews_amount']) break;
    ?>

        <div class="item">
            <?php self::render_single_review($review_data, $options); ?>
        </div>

    <?php 
    $review_count++; 
    endforeach; 
    ?>
</div>

—

### ✅ 2. **Add Owl Carousel JS Init Script**

At the bottom of your page or template (inside a “ tag or enqueued separately):

<script>
jQuery(document).ready(function($) {
    $('.kk-reviews-grid.owl-carousel').owlCarousel({
        loop: true,
        margin: 20,
        items: 1,
        autoplay: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: true,
        nav: false,
        dots: false,
        animateOut: 'fadeOut'
    });
});
</script>

—

### ✅ 3. **Ensure you load Owl Carousel assets**

In your theme or plugin, enqueue these if not already done:

// In functions.php or your plugin setup
wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css');
wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', ['jquery'], null, true);

—

### ✅ Summary:
– ✅ Carousel with only sliding effect, no nav arrows or dots.
– ✅ Autoplays left-to-right with fadeOut.
– ✅ Fully integrated with your PHP loop.

Let me know if you want it responsive with multiple reviews per slide or swipe support for mobile!

User
if(isset($review_data['positive'])) echo apply_filters('kk_plugin_single_review_text', '' .wp_kses($review_data['positive'], array('br' => array())) .
'', $review_data, $options); ?>
Assistant
To **limit the review content to only 5 words** while keeping the rest of your logic intact, you can use PHP's `wp_trim_words()` function.

Here’s how you should update your code:

—

### ✅ Replace this line:

if(isset($review_data['positive'])) echo apply_filters('kk_plugin_single_review_text', '<p>' .wp_kses($review_data['positive'], array('br' => array())) . '</p>', $review_data, $options);

### ✅ With this:

<?php
if (isset($review_data['positive'])) {
    $limited_text = wp_trim_words(wp_kses($review_data['positive'], ['br' => []]), 5, '...');
    echo apply_filters('kk_plugin_single_review_text', '<p>' . $limited_text . '</p>', $review_data, $options);
}
?>
<meta itemprop="inLanguage" content="<?php echo get_bloginfo('language'); ?>">

—

### ✅ Output example:
If the original text is:
> *"I am very satisfied with the order…"*

It will show:
> *"I am very satisfied with…"*

—

Let me know if you want to add a “Read More” link to show full content on click.

User
make it owl slider , which will show no navigation , only slide from left to right!
Assistant
To convert your “ into an **Owl Carousel slider** that slides automatically left-to-right **with no navigation or dots**, follow the steps below:

—

### ✅ 1. Modify your review container to work with Owl Carousel

Wrap each review inside an `.item` and apply the required Owl classes:

<div class="kk-reviews-grid owl-carousel owl-theme">
    <?php 
    $review_count = 1; 
    foreach ($data['reviews'] as $review_data):

        if (isset($options['id']) && !empty($options['id']) && $options['id'] != $review_data['id']) continue;
        if (isset($options['review_display_options']['hide_without_rating']) && $options['review_display_options']['hide_without_rating'] == 1 && empty($review_data['total_score'])) continue;
        if (isset($options['review_display_options']['hide_without_rating_text']) && $options['review_display_options']['hide_without_rating_text'] == 1 && empty($review_data['positive'])) continue;
        if (isset($options['review_display_options']['hide_without_author']) && $options['review_display_options']['hide_without_author'] == 1 && empty($review_data['name'])) continue;
        if (isset($options['show_reviews_rating_higher_than']) && !empty($options['show_reviews_rating_higher_than']) && !empty($review_data['total_score']) && $review_data['total_score'] < floatval($options['show_reviews_rating_higher_than'])) continue;
        if (isset($options['start_with_review']) && !empty($options['start_with_review']) && $options['start_with_review'] > $review_count) {
            $review_count++;
            continue;
        }
        if (isset($options['show_reviews_amount']) && is_numeric($options['show_reviews_amount']) && $options['show_reviews_amount'] > 0 && $review_count > $options['show_reviews_amount']) break;
    ?>
        <div class="item">
            <?php self::render_single_review($review_data, $options); ?>
        </div>
    <?php 
    $review_data = array();
    $review_count++; 
    endforeach; 
    ?>
</div>

—

### ✅ 2. Enqueue Owl Carousel CSS & JS (if not already)

Add this to your theme’s `functions.php` or plugin:

function enqueue_owl_assets() {
    wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css');
    wp_enqueue_style('owl-carousel-theme', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css');
    wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', ['jquery'], null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_owl_assets');

—

### ✅ 3. Initialize Owl Carousel (JS)

Add this script in your footer or inline in a template:

<script>
jQuery(document).ready(function($) {
    $('.kk-reviews-grid.owl-carousel').owlCarousel({
        loop: true,
        margin: 20,
        items: 1,
        autoplay: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: true,
        nav: false,
        dots: false,
        animateOut: 'fadeOut'
    });
});
</script>

—

### ✅ Result:
– Each review is treated as a slide.
– Auto slides from left to right.
– No nav buttons or pagination dots.

Let me know if you want to show multiple reviews at once or make it responsive per screen size.

User
it will show 3 sliders at once !
Assistant
Great! To show **3 reviews at once** in the Owl Carousel, you just need to update the `items` setting in the Owl Carousel initialization.

—

### ✅ Updated JavaScript:

<script>
jQuery(document).ready(function($) {
    $('.kk-reviews-grid.owl-carousel').owlCarousel({
        loop: true,
        margin: 20,
        items: 3, // 👈 Show 3 reviews at a time
        autoplay: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: true,
        nav: false,
        dots: false,
        responsive: {
            0: {
                items: 1 // On small screens, show 1
            },
            600: {
                items: 2 // On medium screens, show 2
            },
            1000: {
                items: 3 // On large screens, show 3
            }
        }
    });
});
</script>

—

### ✅ Ensure your PHP looks like this:

<div class="kk-reviews-grid owl-carousel owl-theme">
    <?php 
    $review_count = 1; 
    foreach ($data['reviews'] as $review_data):
        // All your filter conditions...
        ?>
        <div class="item">
            <?php self::render_single_review($review_data, $options); ?>
        </div>
    <?php 
    $review_count++; 
    endforeach; 
    ?>
</div>

—

### 🧼 Optional: Style the `.item` with padding/margin

.kk-reviews-grid .item {
    padding: 10px;
    box-sizing: border-box;
}

Let me know if you want spacing between items, fade effects, or swipe-only navigation!

User
its showing four and I want equal slides !
Assistant
Thanks for the screenshot! You want to **show exactly 3 reviews (slides) per view in Owl Carousel** — but right now **4 are showing**, likely due to:

1. Missing or incorrect `responsive` config in Owl Carousel.
2. Container width not restricting the layout.
3. CSS affecting the `.item` width or flex wrap.

—

### ✅ Fix Step-by-Step

#### 🔧 Step 1: Owl Carousel JS — Use `responsive` config

Make sure your init script **forces `3` items on large screens**:

<script>
jQuery(document).ready(function($) {
    $('.kk-reviews-grid.owl-carousel').owlCarousel({
        loop: true,
        margin: 20,
        autoplay: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: true,
        nav: false,
        dots: false,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1024: {
                items: 3 // ✅ Only 3 slides visible above 1024px
            },
            1440: {
                items: 3 // 🧠 Prevent Owl from assuming more space
            }
        }
    });
});
</script>

—

#### 🎨 Step 2: CSS — Prevent item overgrowth

Ensure your `.item` is **not expanding** beyond what Owl wants:

.kk-reviews-grid .item {
    box-sizing: border-box;
    padding: 10px;
    width: 100% !important;
}

> Optional: Add max width to outer wrapper if you're in a full-width container.

.kk-reviews-grid.owl-carousel {
    max-width: 1200px;
    margin: 0 auto;
}

—

### ✅ Final Tips

– Confirm no `flex` or `grid` styles on `.item` or `.kk-reviews-grid` from the theme that override width.
– Make sure you **do not have inline styles or CSS overriding `.owl-carousel .item { width: XXpx; }`**.
– You can also test adding `stagePadding: 0` in the Owl init if it's visually overflowing.

—

Would you like me to inspect your actual HTML structure too? Feel free to paste 1 review card’s output HTML for extra precision.

User
<script>
jQuery(document).ready(function($) {
    $('.kk-reviews-grid.owl-carousel').owlCarousel({
        loop: true,
        margin: 12,
        autoplay: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: true,
        nav: false,
        dots: false,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1024: {
                items: 3 // ✅ Only 3 slides visible above 1024px
            },
            1440: {
                items: 3 // 🧠 Prevent Owl from assuming more space
            }
        }
    });
});
</script>

but its still showing 4 !
using this shortcode !

[kiyoh-klantenvertellen layout="default" auto_slide="yes" stars_theme="yellow" stars_size="small" show_logo="no" logo_type="full" show_summary="yes" hide_without_rating="yes" hide_without_rating_text="yes" hide_without_author="no" do_show_reviews="yes" show_reviews_amount="3" start_with_review="2" show_review_rating="yes" limit_review_length="20"]

Assistant
Thanks for the detailed info — you're using the **`[kiyoh-klantenvertellen]`** shortcode and passing `show_reviews_amount="3"` but still seeing **4 review cards** on the slider.

### ✅ Let's clarify the real issue:

Even though you're limiting the number of **total reviews shown** with `show_reviews_amount="3"`, Owl Carousel is showing **3 at once + 1 preloaded** slide due to **how Owl Carousel internally handles width**. This is expected behavior **unless it's constrained via CSS**.

—

### ✅ Solution: FORCE Owl to show exactly 3 per slide visually

#### 🔧 1. Wrap everything in `.owl-carousel`, with `.item` inside each review

Make sure your `self::render_single_review()` in PHP outputs each review wrapped like:

<div class="item">
    <!-- entire review card content here -->
</div>

—

#### 🎯 2. Add this CSS to **force item width and prevent overflow**

.kk-reviews-grid.owl-carousel .item {
    width: 100% !important;
    padding: 10px;
    box-sizing: border-box;
}

.kk-reviews-grid.owl-carousel .owl-stage {
    display: flex;
}

.kk-reviews-grid.owl-carousel .owl-item {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
}

✅ This **overrides Owl’s default width calculations**, and **locks it to 3 per view**, regardless of content size or screen width.

—

#### 🧪 Optional debug CSS

You can test visually by giving a border:

.kk-reviews-grid .item {
    border: 1px solid red;
}

—

### ✅ Final JavaScript stays the same:

You're already using:

items: 3,
responsive: {
  1024: { items: 3 },
  1440: { items: 3 }
}

So that’s good — you just needed CSS to **force the visible width**.

—

Let me know if you'd like:
– Dots added for slider control
– Read More link toggle per card
– Auto height support if review heights vary

User
.kk-reviews-grid {
display: grid
;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
Assistant
Ah — that explains the issue! 🔥

You're currently using this CSS:

.kk-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

### ❌ Problem:
This `display: grid` **overrides Owl Carousel's layout engine**, which relies on `display: flex` in `.owl-stage` and `.owl-item`.

So even though Owl is trying to create a slider, your `grid` layout forces **all items to be visible at once**, hence **showing 4 reviews instead of 3 slides**.

—

### ✅ Solution: Remove the grid layout when using Owl Carousel

Replace your CSS with this:

.kk-reviews-grid {
    /* Remove grid layout */
    display: block;
}

/* Optional spacing inside Owl items */
.kk-reviews-grid .item {
    padding: 10px;
    box-sizing: border-box;
}

/* Force 3 items per slide visually */
.kk-reviews-grid .owl-item {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
}

—

### ✅ Summary:

| Action | Result |
|——————————|————————————-|
| ❌ `display: grid` | Breaks Owl Carousel layout |
| ✅ Use `display: block` | Lets Owl Carousel control slides |
| ✅ Force `.owl-item` to 33.3% | Ensures exactly 3 items per slide |

—

Let me know if you want to **conditionally apply the Owl Carousel layout only when `auto_slide="yes"`**!

User
<style>
.kk-reviews-grid {
    display: grid
;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.reviews-main-container {
    display: flex
;
    gap: 12px;
}
.review-static-card {
      background: #19BDC0;
    min-width: 240px;
    padding: 24px;
    border-radius: 12px;
    display: flex;
        max-width: 240px;
    align-items: flex-start;
    flex-direction: column;
    gap: 36px;
}
.review-static-card p {
    font-weight: 500;
    margin-bottom: 0 !important;
    text-align: left;
}
.review-static-card h4 {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    letter-spacing: -0.2px;
        margin-bottom:0 !important;
}
a.lees-verder-link {
    color: #052626;
    background: #fff;
    padding: 6px 12px;
    border-radius: 30px;
}
</style>
Assistant
Thanks for sharing your current styles.

### ✅ Here's how to fix and separate:
You have two competing layouts:
– `grid` on `.kk-reviews-grid` (for static cards).
– **But you're also using Owl Carousel**, which requires `flex`.

—

### 🎯 Goal:
– Keep your **`.review-static-card`** styled as-is (for the left static box).
– Show the **rest of the reviews in an Owl Carousel** (sliding, 3 at a time, no nav).

—

### ✅ Updated CSS (clean and correct):

/* ✅ Only apply grid if not using Owl Carousel */
.reviews-main-container {
    display: flex;
    gap: 12px;
}

/* Static card on the left (fixed) */
.review-static-card {
    background: #19BDC0;
    min-width: 240px;
    max-width: 240px;
    padding: 24px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 36px;
}

.review-static-card h4 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-bottom: 0 !important;
    text-align: left;
}

.review-static-card p {
    font-weight: 500;
    margin-bottom: 0 !important;
    text-align: left;
}

a.lees-verder-link {
    color: #052626;
    background: #fff;
    padding: 6px 12px;
    border-radius: 30px;
}

/* ✅ Owl Carousel container */
.kk-reviews-grid.owl-carousel {
    flex: 1;
}

/* ✅ Owl Carousel items */
.kk-reviews-grid.owl-carousel .owl-item {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
    box-sizing: border-box;
    padding: 10px;
}

—

### ✅ HTML Structure you should follow:

<div class="reviews-main-container">
    <div class="review-static-card">
        <h4>Your Static Title</h4>
        <p>The paragraph is very interesting, you know?</p>
        <a href="#" class="lees-verder-link">Lees verder →</a>
    </div>

    <div class="kk-reviews-grid owl-carousel owl-theme">
        <div class="item">Review 1</div>
        <div class="item">Review 2</div>
        <div class="item">Review 3</div>
        <!-- More reviews... -->
    </div>
</div>

—

### ✅ Owl Init JS (no changes):

jQuery(document).ready(function($) {
    $('.kk-reviews-grid.owl-carousel').owlCarousel({
        loop: true,
        margin: 12,
        autoplay: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: true,
        nav: false,
        dots: false,
        responsive: {
            0: { items: 1 },
            600: { items: 2 },
            1024: { items: 3 },
            1440: { items: 3 }
        }
    });
});

—

This will:
– Keep your **left static card**.
– Make the **right side a 3-at-a-time Owl slider**.
– Remove the issue of 4 items showing.

Let me know if you'd like that first card to **be part of the carousel** instead!

User
<script>
document.addEventListener('DOMContentLoaded', function () {
            jQuery(document).ready(function($) {
                $('.top-categories-slider').owlCarousel({
                    loop: true,
                    margin: 20,
                    nav: true,
                    dots: false,
                    responsive: {
                        0: { items: 1,nav:true },
                        600: { items: 2,nav:true },
                        1000: { items: 3,nav: false }
                    }
                });
            });
        })
</script>

which add these arrows for mobile , which will be visible for mobile onlY !

Assistant
To **add your custom navigation arrows (SVG)** for the `.top-categories-slider` **visible only on mobile**, follow the steps below.

—

### ✅ 1. Add Custom HTML Markup for Arrows (outside Owl Carousel)

Put this **after your `.top-categories-slider`** container:

<div class="top-categories-arrows mobile-only">
    <button class="custom-prev">
        <!-- Your left arrow SVG -->
        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="17" viewBox="0 0 21 17" fill="none">
            <path d="M0.800188 9.41343L7.99895 16.6151C8.22434 16.8406 8.53004 16.9673 8.8488 16.9673C9.16756 16.9673 9.47326 16.8406 9.69865 16.6151C9.92405 16.3896 10.0507 16.0838 10.0507 15.7649C10.0507 15.446 9.92405 15.1402 9.69865 14.9147L4.54854 9.76451H19.246C19.5642 9.76451 19.8694 9.63805 20.0944 9.41296C20.3194 9.18786 20.4458 8.88257 20.4458 8.56423C20.4458 8.2459 20.3194 7.9406 20.0944 7.71551C19.8694 7.49041 19.5642 7.36396 19.246 7.36396H4.54854L9.69666 2.21076C9.92205 1.98527 10.0487 1.67945 10.0487 1.36056C10.0487 1.04168 9.92205 0.735852 9.69666 0.510366C9.47126 0.28488 9.16556 0.158203 8.8468 0.158203C8.52805 0.158203 8.22234 0.28488 7.99695 0.510366L0.798191 7.71204C0.686319 7.8237 0.597597 7.95637 0.537125 8.10243C0.47665 8.24848 0.445616 8.40506 0.445803 8.56315C0.445988 8.72124 0.47739 8.87774 0.538208 9.02366C0.599024 9.16957 0.688055 9.30204 0.800188 9.41343Z" fill="white"/>
        </svg>
    </button>

    <button class="custom-next">
        <!-- Your right arrow SVG -->
        <svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47" fill="none">
            <path d="M33.1998 24.4134L26.0011 31.6151C25.7757 31.8406 25.47 31.9673 25.1512 31.9673C24.8324 31.9673 24.5267 31.8406 24.3013 31.6151C24.076 31.3896 23.9493 31.0838 23.9493 30.7649C23.9493 30.446 24.076 30.1402 24.3013 29.9147L29.4515 24.7645H14.754C14.4358 24.7645 14.1306 24.6381 13.9056 24.413C13.6806 24.1879 13.5542 23.8826 13.5542 23.5642C13.5542 23.2459 13.6806 22.9406 13.9056 22.7155C14.1306 22.4904 14.4358 22.364 14.754 22.364H29.4515L24.3033 17.2108C24.0779 16.9853 23.9513 16.6794 23.9513 16.3606C23.9513 16.0417 24.0779 15.7359 24.3033 15.5104C24.5287 15.2849 24.8344 15.1582 25.1532 15.1582C25.472 15.1582 25.7777 15.2849 26.0031 15.5104L33.2018 22.712C33.3137 22.8237 33.4024 22.9564 33.4629 23.1024C33.5233 23.2485 33.5544 23.4051 33.5542 23.5631C33.554 23.7212 33.5226 23.8777 33.4618 24.0237C33.401 24.1696 33.3119 24.302 33.1998 24.4134Z" fill="white"/>
        </svg>
    </button>
</div>

—

### ✅ 2. Update JS to enable custom arrows only on mobile

<script>
jQuery(document).ready(function($) {
    const owl = $('.top-categories-slider').owlCarousel({
        loop: true,
        margin: 20,
        nav: false,
        dots: false,
        responsive: {
            0: { items: 1 },
            600: { items: 2 },
            1000: { items: 3 }
        }
    });

    // Custom arrows click
    $('.custom-prev').click(function() {
        owl.trigger('prev.owl.carousel');
    });
    $('.custom-next').click(function() {
        owl.trigger('next.owl.carousel');
    });
});
</script>

—

### ✅ 3. CSS to show arrows only on mobile

.top-categories-arrows {
    display: none;
    justify-content: space-between;
    margin-top: 12px;
}

.top-categories-arrows button {
    background: #19BDC0;
    border: none;
    padding: 8px 12px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show only on mobile */
@media (max-width: 767px) {
    .top-categories-arrows {
        display: flex;
    }
}

—

### ✅ Summary

| What | Why |
|——|—–|
| 🖼️ Add arrows markup outside Owl | Gives better control |
| 📜 JS triggers `prev` / `next` | Manual nav through Owl |
| 🎯 CSS media query | Shows arrows only on mobile |

Let me know if you'd

User
<script>
document.addEventListener('DOMContentLoaded', function () {
            jQuery(document).ready(function($) {
                $('.top-categories-slider').owlCarousel({
                    loop: true,
                    margin: 20,
                    nav: true,
                    dots: false,
                    responsive: {
                        0: { items: 1,nav:true },
                        600: { items: 2,nav:true },
                        1000: { items: 3,nav: false }
                    }
                });
            });
        })
</script>

which add these arrows for mobile , which will be visible for mobile onlY !

Assistant
To add **custom SVG arrows visible only on mobile** for your Owl Carousel `.top-categories-slider`, and hide them on desktop, follow these steps:

—

### ✅ 1. Add the SVGs as HTML outside the carousel:

Place the SVGs with class names like:

<div class="owl-custom-nav-mobile">
    <button class="owl-prev-mobile">
        <!-- Left Arrow SVG -->
        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="17" viewBox="0 0 21 17" fill="none">
            <path d="..." fill="white"/>
        </svg>
    </button>

    <button class="owl-next-mobile">
        <!-- Right Arrow SVG -->
        <svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47" fill="none">
            <path d="..." fill="white"/>
        </svg>
    </button>
</div>

—

### ✅ 2. Style them to only show on **mobile**:

.owl-custom-nav-mobile {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    margin-top: 12px;
}

.owl-prev-mobile,
.owl-next-mobile {
    background: #19BDC0;
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
}

@media (min-width: 1000px) {
    .owl-custom-nav-mobile {
        display: none; /* Hide on desktop */
    }
}

—

### ✅ 3. JavaScript: Connect buttons to Owl Carousel

Update your existing JS like this:

<script>
document.addEventListener('DOMContentLoaded', function () {
    jQuery(document).ready(function($) {
        const owl = $('.top-categories-slider').owlCarousel({
            loop: true,
            margin: 20,
            nav: false,
            dots: false,
            responsive: {
                0: { items: 1 },
                600: { items: 2 },
                1000: { items: 3 }
            }
        });

        // Mobile-only custom nav
        $('.owl-prev-mobile').on('click', function() {
            owl.trigger('prev.owl.carousel');
        });

        $('.owl-next-mobile').on('click', function() {
            owl.trigger('next.owl.carousel');
        });
    });
});
</script>

—

### ✅ Final Structure Example:

<div class="top-categories-slider owl-carousel">
    <div class="item">Slide 1</div>
    <div class="item">Slide 2</div>
    <div class="item">Slide 3</div>
</div>

<!-- Mobile-only arrows -->
<div class="owl-custom-nav-mobile">
    <button class="owl-prev-mobile">
        <!-- Left Arrow SVG -->
    </button>
    <button class="owl-next-mobile">
        <!-- Right Arrow SVG -->
    </button>
</div>

—

Let me know if you want the arrows **inside the carousel** or floating over the slider content for mobile!

User
<script>
document.addEventListener('DOMContentLoaded', function () {
            jQuery(document).ready(function($) {
                $('.top-categories-slider').owlCarousel({
                    loop: true,
                    margin: 20,
                    nav: true,
                    dots: false,
                    responsive: {
                        0: { items: 1,nav:true },
                        600: { items: 2,nav:true },
                        1000: { items: 3,nav: false }
                    }
                });
            });
        })
</script>

add like thjis navText: [prevSvg, nextSvg],
which add these arrows for mobile , which will be visible for mobile onlY !

Assistant
To use custom SVG arrows **only for mobile** (`
User
<script>
document.addEventListener('DOMContentLoaded', function () {
            jQuery(document).ready(function($) {
                $('.top-categories-slider').owlCarousel({
                    loop: true,
                    margin: 20,
                    nav: true,
                    dots: false,
                    responsive: {
                        0: { items: 1,nav:true },
                        600: { items: 2,nav:true },
                        1000: { items: 3,nav: false }
                    }
                });
            });
        })
</script>

add like thjis navText: [prevSvg, nextSvg],
give full code of scripT!
which add these arrows for mobile , which will be visible for mobile onlY !

Assistant
Here’s the full working solution to **add custom navigation arrows (SVGs)** in your Owl Carousel **only for mobile screens**.

—

### ✅ Step-by-Step Solution:

—

### 🔶 1. Add your SVGs as JavaScript strings

<script>
document.addEventListener('DOMContentLoaded', function () {
    jQuery(document).ready(function($) {

        // SVG strings as JS variables
        const prevSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="21" height="17" viewBox="0 0 21 17" fill="none">
        <path d="M0.800188 9.41343L7.99895 16.6151C8.22434 16.8406 8.53004 16.9673 8.8488 16.9673C9.16756 16.9673 9.47326 16.8406 9.69865 16.6151C9.92405 16.3896 10.0507 16.0838 10.0507 15.7649C10.0507 15.446 9.92405 15.1402 9.69865 14.9147L4.54854 9.76451H19.246C19.5642 9.76451 19.8694 9.63805 20.0944 9.41296C20.3194 9.18786 20.4458 8.88257 20.4458 8.56423C20.4458 8.2459 20.3194 7.9406 20.0944 7.71551C19.8694 7.49041 19.5642 7.36396 19.246 7.36396H4.54854L9.69666 2.21076C9.92205 1.98527 10.0487 1.67945 10.0487 1.36056C10.0487 1.04168 9.92205 0.735852 9.69666 0.510366C9.47126 0.28488 9.16556 0.158203 8.8468 0.158203C8.52805 0.158203 8.22234 0.28488 7.99695 0.510366L0.798191 7.71204C0.686319 7.8237 0.597597 7.95637 0.537125 8.10243C0.47665 8.24848 0.445616 8.40506 0.445803 8.56315C0.445988 8.72124 0.47739 8.87774 0.538208 9.02366C0.599024 9.16957 0.688055 9.30204 0.800188 9.41343Z" fill="white"/></svg>`;

        const nextSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47" fill="none">
        <path d="M33.1998 24.4134L26.0011 31.6151C25.7757 31.8406 25.47 31.9673 25.1512 31.9673C24.8324 31.9673 24.5267 31.8406 24.3013 31.6151C24.076 31.3896 23.9493 31.0838 23.9493 30.7649C23.9493 30.446 24.076 30.1402 24.3013 29.9147L29.4515 24.7645H14.754C14.4358 24.7645 14.1306 24.6381 13.9056 24.413C13.6806 24.1879 13.5542 23.8826 13.5542 23.5642C13.5542 23.2459 13.6806 22.9406 13.9056 22.7155C14.1306 22.4904 14.4358 22.364 14.754 22.364H29.4515L24.3033 17.2108C24.0779 16.9853 23.9513 16.6794 23.9513 16.3606C23.9513 16.0417 24.0779 15.7359 24.3033 15.5104C24.5287 15.2849 24.8344 15.1582 25.1532 15.1582C25.472 15.1582 25.7777 15.2849 26.0031 15.5104L33.2018 22.712C33.3137 22.8237 33.4024 22.9564 33.4629 23.1024C33.5233 23.2485 33.5544 23.4051 33.5542 23.5631C33.554 23.7212 33.5226 23.8777 33.4618 24.0237C33.401 24.1696 33.3119 24.302 33.1998 24.4134Z" fill="white"/></svg>`;

        $('.top-categories-slider').owlCarousel({
            loop: true,
            margin: 20,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: false,
            responsive: {
                0: {
                    items: 1,
                    nav: true,
                    navText: [prevSvg, nextSvg]
                },
                600: {
                    items: 2,
                    nav: true,
                    navText: [prevSvg, nextSvg]
                },
                1000: {
                    items: 3,
                    nav: false // ✅ hide arrows on desktop
                }
            }
        });
    });
});
</script>

—

### ✅ Optional CSS (style SVG navigation arrows if needed)

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    background: #19BDC0;
    border: none;
    border-radius: 50%;
    padding: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background-color: #128f91;
}

—

### ✅ Result:

– 🟢 Custom SVG arrows only show on **mobile/tablet** (screens `

Leave a Comment

Your email address will not be published. Required fields are marked *