Owlcarousel2: Getting the real index of item while have loop enabled.

[NPanayotov]

The issue that i'm having is when i try to create a custom thumbnails navigation for the owl carousel.

So basically my markup is:

<div class="slider-nav">
    <ul>
        <li>
            <a href="#">
                <img src="css/images/temp/" alt="">
            </a>
        </li>

        <li>
            <a href="#">
                <img src="css/images/temp/" alt="">
            </a>
        </li>

        <li>
            <a href="#">
                <img src="css/images/temp/" alt="">
            </a>
        </li>
    </ul>
</div><!-- /.slider-nav -->

and this is my js:

            $('.slider-nav').on('click', 'a', function (event) {
                var $this = $(this);
                var $parent = $this.parent();
                var idx = $parent.index();

                $carousel = $this.parents('.slider').find('.slides');

                $carousel.trigger('to.owl.carousel', idx, 500);

                $parent.addClass('current')
                    .siblings().removeClass('current');

                event.preventDefault();
            });

This code works if i don't have loop enabled. When i have loop enabled the carousel clones the slides and my index isn't the correct one.

My question is how can i target the correct index when having cloned slides?
Does anyone got a solution for this?

[thirdender]

What did you end up doing?

[NPanayotov]

I used "dotsContainer" but the trick there use markup that the slider likes you can see the plnkr demo

http://embed.plnkr.co/FSDm1BhcWmINU2qlQsuo/preview

[opfertunes]

This is giving me the correct absolute index of the active image, with loop:true

owl.on('changed.owl.carousel', function(event) 
{

   var pos = event.relatedTarget.normalize(event.item.index, true) -2; 
   if (pos < 0)
   {
        var sourceImages = getYourImageListHere(); //your source array of images/image data.... 
        var imgCount = sourceImages.length;
        pos = imgCount + pos;
    }
    console.debug("index in original image list is ", pos);              
});

[shakirmsr]

How can we get the active slide index on click, while having the loop enabled

[aigre87]

$('.owl-carousel-1').on('click', '.owl-item', function(e) {
var carousel = $('.owl-carousel-2').data('owl.carousel');
e.preventDefault();
carousel.to(carousel.relative($(this).index()));
});

[SergeyMell]

This worked for me:

owl.on('changed.owl.carousel', function (e) {
            if (e.item) {
                var index = e.item.index - 1;
                var count = e.item.count;
                if (index > count) {
                    index -= count;
                }
                if (index <= 0) {
                    index += count;
                }
                return index;
            }
        });

[cs09g]

@opfertunes
var pos = event.relatedTarget.normalize(event.item.index, true) -2;
should be
var pos = event.relatedTarget.normalize(event.item.index, true) - Math.ceil(event.item.count / 2);

[jsPasha]

onChange: function(e) {
   var index = (e.property.value - Math.ceil(e.item.count / 2)) % e.item.count || 0;
   console.log(index)
}

[dualjack]

Small change to @jsPasha code:

onChange: function( e ){
    var index = ( 1 + ( e.property.value - Math.ceil( e.item.count / 2 ) ) % e.item.count || 0 ) || 1;
    console.log(index);
}

In some cases it started with -1 if URLhashListener option was set to true.

[ozgurg]

Remove "dots" property in the options. Then access the real index by "event.page.index". When you remove "dots" property, "event.page.index" will be start 0 instead -1.

But if you are using dots feature, I don't know the right answer.

Example:

owl.owlCarousel({
  loop: true,
  margin: 0,
  nav: false,
  dots: false, // Remove this
  items: 1,
  mouseDrag: true,
  touchDrag: true,
  autoplay: true,
  autoplayHoverPause: false,
  smartSpeed: 1000,
  autoplayTimeout: 4000
});

(Tested on v2.3.4)

[marcelo2605]

I found a small issue in @dualjack solution: when I'm in the first slide and go back to the last (loop: true), the index not change.

[mmdm95]

Hi, I see this solution from this url and change it a little bit. Finally this is the result. Test it to see if its OK or NOT...

var items = event.item.count;     // Number of items
var item  = event.item.index - 1; // Position of the current item

// it loop is true then reset counter from 1
if(item > items) {
   item = item - items
} else if (item < 1) {
   item = items;
}