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>

Answer 1

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/