javascript-为多个猫头鹰轮播创建计数器

我需要创建多个猫头鹰圆盘传送带滑块,即使我添加了多个滑块,我也需要使它在全局上相同,这一直有效,直到需要一个滑块上的计数器为止.

因此,每个滑块都有一个计数器(1/5或1/9),在滚动或单击导航按钮时会更改

这是我所拥有的,但是计数器坏了,它不能独立工作.

$(function(){
var owl = $('.owl-carousel');
owl.owlCarousel({
  autoplay: 2000,items:1,nav:true,loop: true,onInitialized  : counter,//When the plugin has initialized.
  onTranslated : counter //When the translation of the stage has finished.
});

function counter(event) {
   var element   = event.target;         // DOM element,in this example .owl-carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index + 1;     // Position of the current item

  // it loop is true then reset counter from 1
  if(item > items) {
    item = item - items
  }
  $('#counter').html("item "+item+" of "+items)
}
});

这是我的FIDDLE

最佳答案

说明：

实际上,您确定当前位置的方式很好.问题是使用计数器信息更新正确的div.

在您的小提琴中,您似乎正在搜索.counter,但是您应该搜索的是作为旋转木马容器子代的.counter.

解：

$(element).parent().find('.counter').html("item " + item + " of " + items)

工作示例：

$(function() {
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    autoplay: 2000,items: 1,nav: true,onInitialized: counter,//When the plugin has initialized.
    onTranslated: counter //When the translation of the stage has finished.
  });

  function counter(event) {
  	  
    var element = event.target; // DOM element,in this example .owl-carousel
    var items = event.item.count; // Number of items
    var item = event.item.index + 1; // Position of the current item

    // it loop is true then reset counter from 1
    if (item > items) {
      item = item - items
    }
    $(element).parent().find('.counter').html("item " + item + " of " + items)
  }
});

.container {
  width: 350px;
  margin: 15px auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>

<div class="container">
  <div class="owl-carousel">
    <!-- 4 items -->
    <div class="slides"><img src="https://unsplash.it/400/300/?image=121" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=232" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=343" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=454" alt="img1" /></div>
  </div>
  <div class="counter"></div>
</div>
<br><br>
<div class="container">
  <div class="owl-carousel">
    <!-- 3 items -->
    <div class="slides"><img src="https://unsplash.it/400/300/?image=121" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=232" alt="img1" /></div>
    <div class="slides"><img src="https://unsplash.it/400/300/?image=343" alt="img1" /></div>
  </div>
  <div class="counter"></div>
</div>

原文地址：https://www.jb51.cc/jquery/530872.html