将幻灯片的数量显示为 owl carousel 的分页？

问题描述

我正在使用 Owl Carousel 创建一个滑块。我想显示类似“1 of 幻灯片数量”并增加每张幻灯片上的数字。我已经尝试了几种使用 jQuery 的方法，但都没有奏效。

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);
  }

非常感谢任何帮助，谢谢。

解决方法

您有两个选择：

使用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);
});

使用info：

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

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

注意：上面的代码段都没有经过测试，但应该可以工作或需要最少的更改。