dev

Learn how to add multiple dots with Owl Carousel 2

Custom dots with Owl Carousel 2

Here is how you can get custom dot navigation in with Owl Carousel 2.

First create your dots container.

Next include this inside of your options object.

owl.owlCarousel({
    dotsContainer: '#carousel-custom-dots'
});

The following tells Owl Carousel 2 to go to a slide based on the index of the dot that was clicked.

$('.owl-dot').click(function () {
    owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});

That should be all you need to get custom dots up and going with Owl Carousel 2.

Thank you for your time.
Did this post bring you value?
Please share it on Twitter and subscribe to the email newsletter.
Thank you for reading.