How to get the current index with jCarousel Lite?

Question

I'm using jCarousel Lite and need to get the current index (which element is being displayed as I'm only showing one item at a time) so I can add a "current" class to the navigation link.

Does anybody know how I can accomplish this?

http://www.gmarwaha.com/jquery/jcarousellite

Answer 1

From the documentation at the link you posted:

afterEnd Callback function that should be invoked after the animation ends. The elements representing the items that are visible after the animation ends are passed in as argument.

So, create a function that sets your "current" class, and pass it as the afterEnd option when you create the carousel.

Answer 2

First download the uncompressed version of jCarousel Lite and open it. Go to line 288*, or anywhere below the o.beforeStart.call(), and add the following:

li.removeClass("current");

Next go to line 313*, anywhere below the ul.animate();, or even within the animate() callback and add the following:

li.eq(curr).addClass("current");

That's it for the jCarousel Lite modifications. Save the file / upload the changes.

Finally you'll want to set the current class once the page loads. For that use:

$(".jCarouselLite li").eq(0).addClass("current");

or

$(".jCarouselLite li:first").addClass("current");

*Note to future readers: This change is for v1.0.1. The actual line number may vary.