Search code examples
javascriptjquerycarouseljcarousellite

Add active state to first item in jCarousel Lite

When I initialize jCarousel Lite I want to be able to add a 'class="active"' state to my first element in the list. How would I approach this without modifying the plugin?

Current setup - 

$('#viewport').jCarouselLite({
    speed: 500,
    visible: 3,
    scroll: 1,
    start: 0, // Just for testing purposes
    circular: true,
    btnNext: '#next',
    btnPrev: '#previous',
    beforeStart: function(a) {
        $(a[0]).animate({opacity: .5}, 250).toggleClass('active');
    },
    afterEnd: function(a) {
        $(a[0]).animate({opacity: 1}, 500).toggleClass('active');
    }
});
Solution

  • Right after the initialization of your jCarouselLite,

    do the following

    $('#viewport ul li:first').addClass('active');