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:

Carousel Screenshot

HenryRat · Accepted Answer · 2009-08-25T16:20:26.910

I think what you are looking for is carousel.first, which will give you the index of the first visible element (there is also carousel.last to show the last visible element).

Here is an example of it's use, based on the simple carousel example with the addition of the carousel.first variable and itemLoadCallback event:

<script type="text/javascript">
$(document).ready(function() {
    $('#mycarousel').jcarousel({
        itemLoadCallback: trigger
    });
});

function trigger(carousel, state)
{
    $("#currentImg").html(carousel.first);  
}

</script>

</head>
<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>

  <h3>Simple carousel</h3>
  <p>
    This is the most simple usage of the carousel with no configuration options.
  </p>

  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

  Current Photo <span id="currentImg">1</span>

</div>
</body>

I thought that to at first, but first and last don't work when more than one image is visible as the first visible image and the last visible image is not always the current image... — Steerpike, Aug 25 '09 at 16:26
Sorry I'm not fully understanding what you are saying? Using jcarousel's simple example, which uses three images and scrolls horizontally, carousel.first will return the left-most element and carousel.last will return the right-most element. On each press of the left and right arrows to perform the next and previous operations the itemLoadCallback event is triggered passing the carousel data enabling you to check the first and last elements. And whichever you consider to be the current one you can display, if you consider the middle to be current then use these to determine the middle index. — HenryRat, Aug 25 '09 at 16:36

score 2 · Answer 2 · edited May 27 '12 at 07:14

2

You can use:

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

edited May 27 '12 at 07:14

Asherah

18,948
5
53
72

answered May 26 '12 at 21:46

patrick

21
1

jjclarkson · Answer 3 · 2011-12-27T04:47:59.437

1

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

edited Dec 27 '11 at 04:47

answered Aug 25 '09 at 15:58

jjclarkson

5,890
6
40
62

score 1 · Answer 4 · answered Aug 25 '09 at 16:10

It doesn't seem as obvious as I would have hoped from a jQuery plugin to be honest. There are two callbacks itemVisibleInCallback and itemVisibleOutCallback, but they're only going to be useful if you're only displaying one image at a time.

To be honest, as much as I hate to send you down a totally different path, I would highly recommend using the cycle plugin for carousel work as it allows much, much finer customisation that would I could see from my quick look through the jCarousel (sorry jCarousel author - the code itself looks brilliant!).

score 1 · Answer 5 · answered Apr 28 '14 at 05:46

You can hook into the 'jcarousel:animate' event, and grab the current slide as a jQuery Object.

$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
  console.log(carousel._target); // this outputs your current slide as jQuery object.
});

Jan Pi · Answer 6 · 2014-10-27T21:18:20.547

1

If you have pagination (bullets)

<p class="jcarousel-pagination"></p>

you can simply use:

var index = $('.active').html();

jcarousel is adding class 'active' to active bullet, if you have numbers on the bullets you just retrieve them by .html() method

Also you can turn them to integers by parseInt:

var index = parseInt($('.active').html());

edited Oct 27 '14 at 21:18

answered Oct 27 '14 at 20:00

Jan Pi

167
2
13

score 1 · Answer 7 · answered Nov 14 '10 at 14:50

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().

score 1 · Answer 8 · answered Dec 07 '10 at 06:48

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

score 1 · Answer 9 · answered May 14 '18 at 02:39

Another solution getting the current index of the item with jquery...

//jcarousel item becomes visible
$('.jcarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
    // "this" refers to the item element

    itemCount = $(".jcarousel li").length; //1 based
    currentIndex = ($( "li" ).index($(this))); //0 based

    if(currentIndex + 1 == itemCount) {
        alert('last');
    }

    if(currentIndex == 0) {
        alert('first');
    }
});

score 0 · Answer 10 · answered May 31 '16 at 05:39

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.

score 0 · Answer 11 · answered Jul 30 '18 at 04:32

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>

Getting Index of Current Item in JCarousel

11 Answers11

Linked