Javascript 为多个Owl转盘创建计数器

我需要创建多个猫头鹰转盘滑块，我需要它是全局相同的，即使我添加了许多滑块，这是工作，直到我需要一个滑块计数器

因此，每个滑块都有一个计数器（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)
}
});

以下是我的解释： 实际上，确定当前位置的方法很好。问题在于使用计数器信息更新正确的div

在小提琴中，看起来您正在搜索

.counter

，但您应该搜索的是旋转木马容器的子对象

.counter

解决方案： 工作示例：

$（函数（）{
var owl=$（'.owl carousel'）；
猫头鹰旋转木马({
自动播放：2000，
项目：1，
导航：是的，
循环：对，
onInitialized:counter，//插件初始化时。
onTranslated：当舞台翻译完成时，计数器//运行。
});
功能计数器（事件）{
var element=event.target；//DOM元素，在本例中为.owl carousel
var items=event.item.count；//项目数
var item=event.item.index+1；//当前项的位置
//如果循环为真，则从1重置计数器
如果（项目>项目）{
项目=项目-项目
}
$（element）.parent（）.find（'.counter'）.html（“项”+项中的项+”）
}
});
.container{
宽度：350px；
利润率：15px自动；
}





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