Owl-Carousel2 - set dotsData
Solution 1
Change the following code like this:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotData: true,
dotsData: true
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
Add your dots data in your owl-item:
<div class="item" data-dot="<button role='button' class='owl-dot'></button>">
<!-- Your Image -->
</div>
Solution 2
So looking at the documentation, the dotsData option takes a boolean which just tells Owl Carousel to look for the data-dot
attribute for each item a dot is shown for. So your custom markup needs to go into the HTML rather than being passed in as a string when configuring the carousel in JS.
If you check this Fiddle you can see how the JS option relates to the HTML data attribute: https://jsfiddle.net/4xymnwey/
HTML
<ul class="owl-carousel owl-theme">
<li class="carousel-slot" data-dot="<p>text 1</p>">slide 1</li>
<li class="carousel-slot" data-dot="<p>text 2</p>">slide 2</li>
<li class="carousel-slot" data-dot="<p>text 3</p>">slide 3</li>
</ul>
JS
$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
dotsData: true
});
Credit to this issue comment on GitHub for the answer. I hope that helps :)
kores59
Updated on June 06, 2022Comments
-
kores59 almost 2 years
I need to set custom dots in owl carousel. I have this code in JS:
$(document).ready(function() { $('#header-slider').owlCarousel({ loop: true, autoplay: true, autoplayTimeout: 2300, pagination: false, navigation: true, navText: [$('.am-next'), $('.am-prev')], navigation: true, margin: 0, dotsData: ["<button role='button' class='owl-dot'></button><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' xml:space='preserve'><path class='loader' transform='translate(125, 125) scale(.84)'></svg>"], responsive: { 0: { items: 1 }, 600: { items: 1 }, 1000: { items: 1, nav: false }, 1200: { items: 1, nav: false } } }); });
But with this code nothing happend, just undefined dots are displayed. Is even possible to make custom dots like this?