How do you make custom Owl Carousel dots clickable?

Question

I have created some custom dots for my Owl Carousel, but I can't get them to be clickable. I have tried the below code, borrowed from another post, but this just makes all the dots go to number 1 on click.

<div id="dots" class="dots">

    <div class="item active"><span>1</span></div>
    <div class="item"><span>2</span></div>
    <div class="item"><span>3</span></div>
    <div class="item"><span>4</span></div>
    <div class="item"><span>5</span></div>

</div>

<div id="owl-carousel" class="owl-carousel owl-loaded owl-drag">

  <div class="owl-stage-outer">
  <div class="owl-stage">
       
    <div class="owl-item cloned"> </div>
    <div class="owl-item active"> </div>

  </div>
  </div>
</div>


$(document).ready(function () {

    $("#owl-carousel").owlCarousel({
        items: 1,
        loop: true,
        autoplay: false,
        dots: true,
        dotsData:true,
        dotsContainer: '#dots',
        nav: true,
        dotsEach: true,
        navText: ["<img src=''>", "<img src=''>"]
    });
    
    $('#dots .item').click(function() {
          $('#dots .item').trigger('to.owl.carousel', [$(this).index(), 1000]);
    });
    
});
                          

Answer 1

This works. To center the custom dots just do:

.owl-dots {
    text-align: center
}

$('.owl-carousel').owlCarousel({
  loop: false,
  margin: 10,
  nav: false,
  dots: false,
  dotsData:true,
  dotsContainer: '.owl-dots',
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
</div>

<div class="owl-dots">
  <button role="button" class="owl-dot active"><span>1</span></button>
  <button role="button" class="owl-dot"><span>2</span></button>
  <button role="button" class="owl-dot"><span>3</span></button>
  <button role="button" class="owl-dot"><span>4</span></button>
</div>