为多个 Owl 轮播创建计数器

Question

我需要创建多个 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)
}
});

这是我的FIDDLE

Answer 1

解释：

实际上，您确定当前位置的方式很有效。问题是用计数器信息更新正确的 div。

在您的 fiddle 中，您似乎在搜索 .counter，但您应该搜索的是 .counter，它是轮播容器的子项。

解决方案：

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

工作示例：

$(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
    }
    $(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>

为多个 Owl 轮播创建计数器

Create counters for multiple Owl Carousel

javascript

php

jquery

owl-carousel

解释：

解决方案：

工作示例：