猫头鹰轮播当前幻灯片和幻灯片数量与循环选项 (php)答案

【问题标题】：Owl Carousel Current Slide and Number of Slides WITH loop option (php)猫头鹰轮播当前幻灯片和幻灯片数量与循环选项 (php)
【发布时间】：2018-02-01 22:44:35
【问题描述】：

到目前为止，我已经查看了一些问题，但我所看到的这些问题都没有真正帮助我找到解决方案。

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

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

我看过的一些代码示例工作，除了一件事。似乎 Owl Carousel 在开头添加了 2 个项目，在末尾添加了 2 个项目，并附加了 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 );

【问题讨论】：

标签： php jquery owl-carousel-2

【解决方案1】：

我在网上找到了这个解决方案，效果很好 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

【讨论】：

这对我来说非常有效

【解决方案2】：

所以这个答案适用于那些使用 php 并运行 foreach 循环的人。

我所做的是将data-dot 设置为增量编号。然后我计算了数组中的项目数，并将其作为最终的项目数传递。

然后调用容器并使用 CSS 的某个绝对位置，我能够从某种意义上“欺骗”前端查看器进入计数。

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

【讨论】：