Question

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

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

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

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

我试图隔离克隆计数并且这样做有效，但currentIndex是我遇到问题的地方。试图让这个数字准确无法起作用。如果我说4张幻灯片，则currentIndex从3开始，最多为8，而totalItems显示为4。

感谢任何帮助！

以下是我正在使用的代码：

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

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

我将其分解为更易于理解的代码。

.selector {
   position: absolute;
   content: '';

   left: 0;
   right: 0;
   top: 0;
   bottom: 0;

   margin-top: 2em;
   margin-bottom: 5em;
}

它做了承诺。但是我不知道event.relatedTarget和.relative（）的实际作用，这是我第一次看到它们被实现。同样，与名称空间相关的if语句并不是真正需要它才能起作用。

它看起来不像是猫头鹰轮播的基本代码。如果有人试图向我解释这种魔术的原理，我会很乐意的：D

Answer 2

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

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

然后调用容器并使用CSS的绝对位置，我能够＆＃34;技巧＆＃34;在某种意义上，前端观众进入了计数。

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

Owl Carousel当前幻灯片和幻灯片数量循环选项（php）

2 个答案: