Question

I can’t do $('ul li:first') or $('ul li:eq(0)') because they select the first item which is not necessarily the first visible item.

I’m using the jCarousel Lite plugin:

It works by moving the ul left by giving it negative margin every time next is clicked and moving it right when prev is clicked.

I want to give the first visible list item a red border color. The plugin doesn’t add anything to the markup for the first visible item in the list so how can I target it?

P.S. $('ul li:visible').is(':first') won’t work either because the plugin doesn’t actually give the non visible lis any display none property.

Answer 1

From: http://www.gmarwaha.com/jquery/jcarousellite/#doc you can use the afterEnd callback function:

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.

$(".carousel").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    afterEnd: function(a) {
       $(a[0]).addClass("redBorder");
   }
});