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,
}
}
});
})
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>');
}
});