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/

owlcarousel2无限循环和导航

1 个答案: