猫头鹰轮播当前幻灯片和带有循环选项的幻灯片数量 (php)

Question

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

我需要在使用猫头鹰旋转木马的滑块上安装一个计数器。我需要获取当前的幻灯片计数和滑块中的项目数。

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

我看过的一些代码示例可以正常工作，但有一件事除外。看起来 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 );

Answer 1

I have found this solution online which works great https://codepen.io/maer2k/pen/qPVWEd

I broke it down to a more understandable code.

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);
}

It does what it promises. But i have no idea of what event.relatedTarget and .relative() actually do, it's the first time i see them implemented. Also the namespace related if statement isn't really required for it to work.

It doesnt look like it's owl-carousel base code. Would love if someone tryed to explain to me how this magic works :D