Display number of slides as owl carousel's pagination?

I’m creating a slider using the Owl Carousel. I’d like to display something like "1 of number of slides" and increment the number on each slide. I’ve tried a couple of methods using jQuery but they haven’t worked.

HTML:

<div class='owl-carousel owl-theme'>
  <div class='item'>
    <span class='article-card-number'></span>
  </div>
  <div class='item'>
    <span class='article-card-number'></span>
  </div>
  <div class='item'>
    <span class='article-card-number'></span>
  </div>
  <div class='item'>
    <span class='article-card-number'></span>
  </div>
  <div class='item'>
    <span class='article-card-number'></span>
  </div>
  <div class='item'>
    <span class='article-card-number'></span>
  </div>
</div> 

jQuery:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:20,
    nav:true,
    responsive:{
          0:{
              items:1
          },
          600:{
              items:2
          },
          1000:{
              items:3
          }
      },
  });

  var numberOfSlides = $('.item').length;
        
  for (var i = 0; i < numberOfSlides; i++) {
    $('.article-card-number').html(i + ' of ' numberOfSlides);
  }

Any help would be greatly appreciated, thanks.

172 thoughts on “Display number of slides as owl carousel's pagination?”