javascript - owlcarousel2 无限循环和导航

Question

我有一个带导航功能的 Owl Carousel ，它可以自动播放，但当我打开无限循环时会中断，因为它会弄乱索引。

随着循环结束，索引从 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/