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'.

How can I do this?

EDIT:

Sample of the end product:

Answer 1

I found this method of highlighting the jcarousel controller that may contain the answer.

Answer 2

I too have found that jCarousel returns unusable .first, .last, .prevFirst and .prevLast properties at the times that you need them.

Hence, I had to do it the dirty way and decided to write a function that returns the ID of whichever li tag is currently the first in the container, by reading whether or not it's left-offset is above zero. If so, and it's the first one with an above-zero left position, it's my current slide.

The following code assumes that you've put an id="listitem-N" in the list tags in your foreach() loop, where N is the current iteration.

var currSlide = 0;

function getCurrentCarouselItem(){

    $("ul#use-cases li.use-case").each(function(){

        var leftPos = $(this).offset().left;

        if( leftPos >= 0){

            var id = $(this).attr('id').split("-");

            currSlide =  id[1];

            return false;

        }

    });

    return currSlide;

}

The reason I don't return the id in the each() is because each() is a function and the return will only return for that function, not getCurrentCarouselItem().

Answer 3

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 <li> in the <ul> to determine index of the current item.

Answer 4

Depends of what you want to do but here is a more "generic way" to do the same, instead that you return the object itself and not is id:

var currSlide = 0;
    function getCurrentCarouselItem(){
      $("ul#ulcol li.licol").each(function(){
        if ($(this).offset().left >= 0){
            currSlide = this;
            return false;
        }
      });
    return currSlide;
    }

Answer 5

var jcarousel = $('.jcarousel').on('jcarousel:createend', function(event, carousel) {
                  do_something_with_current_slide(carousel); //in case if you need current slide on the begining
              })
              .on('jcarousel:animateend', function(event, carousel) {
                  do_something_with_current_slide(carousel); //do something with current slide right after animation ends
              })
              .jcarousel({
                    wrap: 'circular'                    
              });

function do_something_with_current_slide(carousel){
    li = carousel._target;  //li of current slide
    alert(li.attr('slide')); 
}

you can use any number of attributes to indentify slide and data inside

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li slide="1" currency="EUR"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75"/></li>
    <li slide="2" currency="USD"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75"/></li>
    <li slide="3" currency="UAH"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75"/></li>
</ul>       

Answer 6

You can use:

function trigger(carousel, state) { 
    index = carousel.index(carousel.last, size of list);
}