Owl 轮播当前幻灯片和带循环选项的幻灯片数量 (php)

Question

到目前为止，我已经研究了几个问题，none 我看到的这些问题确实帮助我找到了解决方案。

我需要在使用 Owl 轮播的滑块上设置一个计数器。我需要获取当前幻灯片计数和滑块中的项目数。

问题是，我告诉滑块在到达最后一张幻灯片时循环回到开头。

除了一件事，我看过的一些代码示例是有效的。似乎 Owl Carousel 在开头添加了 2 个项目，在结尾添加了 2 个项目，并附加了 class cloned。这与我一直在使用的代码计数混淆了。

我试图隔离克隆的计数并且有效，但是 currentIndex 是我遇到问题的地方。试图使计数准确是行不通的。如果我说 4 张幻灯片，currentIndex 从 3 开始到 8，而 totalItems 显示 4。

感谢任何帮助！

我正在使用OwlCarousel 2

这是我使用的代码：

var = mapSliderOptions = {
        loop: true,
        margin: 0,
        items: 1,
        autoWidth: false,
        mouseDrag: true,
        touchDrag: true,
        dots: false,
        onInitialized  : counter, //When the plugin has initialized.
        onTranslated : counter,
        responsive: {
            0: {
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true
            },
            768: {
                autoplay: false,
                items: 1
            }
        }
    },

function counter(event) {
    var totalItems = $('.owl-item:not(.cloned)' ).length;
    var currentIndex = $('div.active').index() + 1 ;

    $('#counter').html("item "+ currentIndex +" of " + totalItems);
}


$('.map-hero-slider').owlCarousel( mapSliderOptions );

Answer 1

所以这个答案是为那些使用 php 和运行一个 foreach 循环的人准备的。

我所做的是用增量数字设置 data-dot。然后我计算了数组中项目的数量，并将其作为项目的最终计数通过。

然后调用容器并使用 CSS 的一些绝对位置，我能够 "trick" 前端查看器在某种意义上进入计数。

不是很有效，但对我有用。

Answer 2

我在网上找到了这个解决方案，效果很好 https://codepen.io/maer2k/pen/qPVWEd

我把它分解成更容易理解的代码。

var gallery = $('.owl-carousel');

gallery.owlCarousel({
  items: 1,
  loop: true,
  onInitialized: counter,
  onChanged: counter,
});

function counter(event) {
  if (!event.namespace) {
    return;
  }
  var slides = event.relatedTarget;
  $('.slider-counter').text(slides.relative(slides.current()) + 1 + '/' + slides.items().length);
}

它做到了它所承诺的。但我不知道 event.relatedTarget 和 .relative() 实际上做了什么，这是我第一次看到它们的实现。此外，命名空间相关的 if 语句并不是真正需要它才能工作。

它看起来不像是 owl-carousel 基本代码。如果有人试图向我解释这个魔法是如何工作的，我会很高兴：D

Owl 轮播当前幻灯片和带循环选项的幻灯片数量 (php)

Owl Carousel Current Slide and Number of Slides WITH loop option (php)

php

jquery

owl-carousel-2