Getting Index of Current Item in JCarousel

Question

I am attempting to get the index of the current item in a JCarousel so that I can display the current position within the Carousel to the user. For example, \'13/20\'.

H

Answer 1

If the items in your carousel can be re-ordered, the only reliable way I've found to get the index of the current item is:

$('#myCarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
    var index = $('#'+this.id).index();
    console.log('++ index: %s', index);
});

Here's why.

You'll notice that this.id of each item in the carousel is something like image-1 where 1 is the original index of the item in the carousel before its order was changed. That index appears to be what is retrievable using the jcarousel:animateend event and calling carousel.index($(this).jcarousel('first')).

However, once you start reordering the items in the carousel, that event is no longer helpful, and the number in the id is now misleading. So, we need to use the position of the