Owlcarousel2无限循环和导航

Question

我有一个带有导航的猫头鹰旋转盘，它可以与自动播放一起工作，但当我打开无限循环时，它会中断，因为它会弄乱索引。

当循环关闭时，索引从0-3开始，当循环打开时，索引从4-7开始，但是当我开始使用导航时，索引开始重叠。什么好主意吗?

JS:

my.owlCarousel({
    autoplay: true,
    autoplaySpeed: 100,
    loop: true,
    items:1,
    margin:10,
    URLhashListener: true
});
my.on('changed.owl.carousel', function(e) {
    var index = e.item.index;
    console.log(index);
    switch(index) {
        case 0:
            //highlight text according to image displayed
            break;
        case 1:
            //highlight text according to image displayed
            break;
        case 2:
            //highlight text according to image displayed
            break;
        case 3:
            //highlight text according to image displayed
            break;
    }
});

HTML:

                <ul class="my-nav">
                    <li><a id="1" class="owl-link" href="#owl1"></li>
                    <li><a id="2" class="owl-link" href="#owl2"></li>
                    <li><a id="3" class="owl-link" href="#owl3"></li>
                    <li><a id="4" class="owl-link" href="#owl4"></li>                       
                </ul>
                <div id="my-carousel" class="owl-carousel">
                    <div class="item" data-hash="owl1">
                        //img
                    </div>
                    <div class="item" data-hash="owl2">
                        //img
                    </div>
                    <div class="item" data-hash="owl3">
                        //img
                    </div>
                    <div class="item" data-hash="owl4">
                        //img
                    </div>
                </div>

Answer 1

将近5年后，我向你展示了一个潜在的解决方案…

OwlCarousel索引包括循环效果所需的克隆元素。

我创建了下面的函数，检查是否启用了循环设置并回顾性地调整索引。

/**
 * Get the current slide index from an owl carousel event.
 *
 * @param {object} event
 * @return {number}
 */
function getOwlCarouselIndex(event) {
    const data = $(event.currentTarget).data('owl.carousel');
    if (data && data.settings.loop) {
        return Math.abs(event.property.value - Math.ceil(event.item.count / 2) % event.item.count);
    }
    return event.item.index;
};

基于原始问题....的示例用法

my.on('changed.owl.carousel', function(e) {
    var index = getOwlCarouselIndex(e);
    console.log(index);
    switch(index) {
        case 0:
            //highlight text according to image displayed
            break;
        case 1:
            //highlight text according to image displayed
            break;
        case 2:
            //highlight text according to image displayed
            break;
        case 3:
            //highlight text according to image displayed
            break;
    }
});

可以在这里找到一个工作示例:https://jsfiddle.net/thelevicole/sf2hg5L1/1/