Owl carousel responsive owl-dots working weird

Question

My owl carousel has a dot-data, and I just want it have a dot-data from 0px to 1024px, and from 1025px there will be no more dot-data just a dot, so I write like this, and it's just work with a owl-nav, and about an owl-dots, I have to reload the page for it to work.Please help me, I would appreciate all the answers, thank you.

$(window).on('load', function() {
const next_icon = '<img src="./images/next-icon.svg">';
const prev_icon = '<img src="./images/prev-icon.svg">';
$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 30,
    items: 1,
    dots: true,
    responsiveClass: true,
    navText: [
        prev_icon,
        next_icon
    ],
    responsive: {
        0: {
            dotData: true,
            dotsData: true,
            nav: false,
        },

        1025: {
            dotData: false,
            dotsData: false,
            nav: true,
        }
    }
});

})

score 1 · Answer 1 · answered Oct 02 '21 at 19:51

First of all - there no such option as dotData. Only dotsData, if we talk about owl-carousel-2 version. And responsiveClass also. About dotsData in Owl docs (here: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html) you can see that the dotsData in List of responsive only on load so it works correctly - only if page will be reloaded. So, you must to create another solution by jQuery. For ex.:

jQuery(window).resize(function() {
if (window.innerWidth > 1024) {
  jQuery('.your-dot-item-class').removeAttr('data-dot');
} else {
  jQuery('.your-dot-item-class').attr('data-dot', '<p>Some content</p>');
}
});

Owl carousel responsive owl-dots working weird

1 Answers1