javascript - Display number of slides as owl carousel's pagination?

Question

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.

question from:https://stackoverflow.com/questions/65922165/display-number-of-slides-as-owl-carousels-pagination

Answer 1

You have two options:

With events:

$('.owl-carousel').owlCarousel({
    // your initialisation code
});

owl.on('translated.owl.carousel', function(event) {
    $('.article-card-number').text(event.item.index + ' of ' event.item.count);
});

With info:

$('.owl-carousel').owlCarousel({
    ...
    info: getInfo
});

function getInfo(i){
    $('.article-card-number').text(i.currentPage + ' of ' i.allPages);
}

Note: None of the code segments above were tested but should work or require minimal changes.