3

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?

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
kores59
  • 443
  • 1
  • 5
  • 16

3 Answers3

4

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>
Lovlesh Pokra
  • 722
  • 4
  • 14
4

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 :)

Stuart Wilson
  • 91
  • 3
0

If nothing helped to you. Try to achieve manually. Here is the example:-

HTML Auto-generated by Owl-carousel

<div class="owl-controls">
    <div class="owl-pagination">
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page active"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
    </div>
</div>

It will auto-generated by Owl carousel. select parent id/class of this and change content using javascript or jquery. It's totally up to you. here is the example:-

Javascript

 var dots = document.querySelectorAll("#testomonial .owl-pagination .owl-page");
        let i=1;
        dots.forEach((elem)=>{
            elem.innerHTML = i;
            i++;
})
Inderjeet
  • 1,488
  • 2
  • 17
  • 30