Press "Enter" to skip to content

How to create 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.

<div id='carousel' class='owl-carousel'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

<ul id='carousel-custom-dots' class='owl-dots'>
    <li class='owl-dot'><!-- Anything in here --></li>
    <li class='owl-dot'></li>
    <li class='owl-dot'></li>
</ul>

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.

Leave a Reply

Your email address will not be published. Required fields are marked *