owlcarousel2 infinite loop and navigation

Question

I have an owl carousel with navigation that works with autoplay but breaks when I turn on the infinite loop because it messes up the index.

With loop off the indexes go from 0-3, with the loop on they go from 4-7, but then start overlapping when I start to use navigation. Any ideas?

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>

Did you find a solution to this issue? I'm having the same problems with the indexes. — MillyMonster, Sep 12 '16 at 13:45
I did not, I just made it so when it reaches the last index, it waits for 5 seconds and used owl's 'goto' to return to the first slide (which keeps it looping but gets rid of the infinite illusion) — Arthur, Sep 12 '16 at 17:14

score 1 · Accepted Answer · answered Jun 03 '21 at 16:22

Almost 5 years later I present you with potential solution...

OwlCarousel indexes include the cloned elements required for the looping effect.

I've created the below function which checks if loop setting is enabled and adjusts the index retrospectively.

/**
 * 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;
};

Example usage based on the original question....

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

A working example can be found here: https://jsfiddle.net/thelevicole/sf2hg5L1/1/

owlcarousel2 infinite loop and navigation

1 Answers1