How to make custom dots in owl carousel?

Question

I have implemented custom prev next buttons(i ommit css styles for prev next buttons), but havent dots. Who know what is mistake I did?

Answer 1

Use option dotsContainer, but sometimes it works oddly.

For example

<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.

via http://derickruiz.com/owl-carousel-custom-dots