Owl Carousel Mobile Settings

onmobile show dots and hide arrow

$("#owl-carousel-grid").owlCarousel({
    loop: false,
    margin: 30,
    responsive: {
        0: {
            items: 1, // 1 column for mobile
            nav: false, // Hide nav arrows on mobile
            dots: true // Show dots on mobile
        },
        768: {
            items: 2, // 2 columns for tablets
            nav: false, // Hide nav arrows on tablets
            dots: true // Show dots on tablets
        },
        1024: {
            items: 3, // 3 columns for desktop
            nav: true, // Show nav arrows on desktop
            dots: false // Hide dots on desktop
        }
    },
    autoplay: false,
    autoplayTimeout: 3000,
    autoplayHoverPause: true
});

### Changes Made:
1. Added `nav: false` and `dots: true` for the `0` and `768` breakpoints to hide the navigation arrows and show the dots on mobile and tablet.
2. Set `nav: true` and `dots: false` for the `1024` breakpoint to show the navigation arrows and hide the dots on desktop.

This configuration will achieve your desired functionality!

### 1. Check CSS Styles
Ensure that the styles for the dots are defined properly. By default, Owl Carousel generates dots with specific classes. You may need to inspect the elements using your browser's developer tools to see if the dots are hidden by CSS. Here’s a basic style setup you can use:

.owl-dots {
    text-align: center; /* Center the dots */
    margin-top: 10px; /* Add some space above the dots */
}

.owl-dots .owl-dot {
    display: inline-block; /* Ensure dots are inline */
    margin: 0 5px; /* Add some space between dots */
}

.owl-dots .owl-dot span {
    width: 12px; /* Set width for the dot */
    height: 12px; /* Set height for the dot */
    background: #ccc; /* Default dot color */
    border-radius: 50%; /* Make dots round */
    display: block; /* Ensure it's a block element */
}

.owl-dots .owl-dot.active span {
    background: #000; /* Active dot color */
}

### 2. Inspect HTML Structure
Use your browser's developer tools (F12 or right-click > Inspect) to check the HTML structure of the dots. Ensure they are being generated inside the carousel. You should see a structure like this:

<div class="owl-dots">
    <button class="owl-dot"><span></span></button>
    <button class="owl-dot active"><span></span></button>
    ...
</div>

### 3. Ensure No Conflicting CSS
Check if there are any CSS rules in your stylesheet that might be hiding the dots. Look for properties like `display: none`, `visibility: hidden`, or `opacity: 0` applied to the `.owl-dots` or `.owl-dot` classes.

### 4. Update Owl Carousel
Make sure you are using the latest version of Owl Carousel. Sometimes, bugs in older versions can cause display issues. If you're not using the latest version, consider updating it.

### 5. Initialize After DOM Ready
Ensure that you are initializing the Owl Carousel after the DOM is fully loaded. Wrap your code in a `$(document).ready()` block if it's not already:

$(document).ready(function(){
    $("#owl-carousel-grid").owlCarousel({
        loop: false,
        margin: 30,
        responsive: {
            0: {
                items: 1,
                nav: false,
                dots: true
            },
            768: {
                items: 2,
                nav: false,
                dots: true
            },
            1024: {
                items: 3,
                nav: true,
                dots: false
            }
        },
        autoplay: false,
        autoplayTimeout: 3000,
        autoplayHoverPause: true
    });
});

### 6. Debugging
If the issue persists, try adding the following CSS rule to force visibility temporarily, to help with debugging:

.owl-dots {
    display: block !important; /* Force display of dots */
}

After following these steps, the dots should appear and function correctly. Let me know if you need further assistance!

"These are paid plugins, and some of them do not send notifications regarding updates. We need to update them manually. Typically, we rely on update notifications in WordPress."

"Yes, we have noted all these plugins for which update notifications were not sent in WordPress."

### HTML Structure Example
Assuming your HTML structure looks something like this:

<div class="row-parent">
    <div class="row-container class1">Content 1</div>
    <div class="row-container class2">Content 2</div>
    <div class="row-container class3">Content 3</div>
</div>

### CSS
To target the first `.row-container` within `.row-parent`, you can use the following CSS:

.row-parent .row-container:first-child {
    /* Your CSS properties here */
    background-color: yellow; /* Example property */
    /* Add any other styles you want */
}

### Explanation
– **`.row-parent .row-container:first-child`**: This selector targets the first `.row-container` that is a child of `.row-parent`.
– **CSS Properties**: Replace the example properties with the styles you want to apply.

### Additional Note
If you want to apply styles only if `.row-container` has specific classes, you can combine selectors. For example, if you want to target the first `.row-container` that has a specific class, you can do:

.row-parent .row-container.class1:first-child {
    /* Your CSS properties here */
}

This approach allows you to specifically style the first child of the `.row-parent` that matches your criteria. If you have any specific scenarios or additional details, feel free to share!