显示幻灯片的数量作为猫头鹰轮播的分页？答案

【问题标题】：Display number of slides as owl carousel's pagination?显示幻灯片的数量作为猫头鹰轮播的分页？
【发布时间】：2021-01-27 15:23:26
【问题描述】：

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

任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： javascript html jquery carousel owl-carousel

【解决方案1】：

你有两个选择：

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

注意：以上代码段均未经过测试，但应该可以工作或只需进行少量更改。

【讨论】：