jCarouselLite: How can I get the values of the currently displayed images?

I want a jCarouselLite gallery to act as scrolling thumbnails and present a larger image next to it by somehow refering to it's currently displayed images (then selecting the first image through an array or similar). How would I approach this?

The current setup -

$('.carousel').jCarouselLite({

btnNext: '.next',

btnPrev: '.previous',

auto: true,

timeout: 500,

speed: 500,

vertical: true,

visible: 3,

circular: true,

beforeStart: function(a) {开发者_如何学JAVA

//alert("Before animation starts:" + a);

},

afterEnd: function(a) {

//fetch first image of the currently displayed images

//set html content of .display div to be that of the new image

}

});

This might help - Showing the position in jCarouselLite

You can use the built in afterEnd and beforeStart functions to show you what's currently being displayed to the user.

$(".ccvi-carousel").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    speed:  800,
    //auto: 2000,
    afterEnd: function(a) { 
        //look into the object and find the IDs of the list items
        left = $(a[0]).attr("id");
        mid = $(a[1]).attr("id");
        right = $(a[2]).attr("id");
        //Do something
        $('li#' + left + ' .cf-img').fadeIn();
        //alert("Left:" + left + "Middle:" + mid + "Right:" + right + "");
    }
});