Add active state to first item in jCarousel Lite

Question

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

Answer 1

Right after the initialization of your jCarouselLite,

do the following

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

Answer 2

Apologies in advance if I'm way off track. Are you not able to add this class prior to the initialisation of jCarouselLite?

Add the code in between the comment tags to the jCarousel source.

div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images

/* add this */

    if(o.atStart){
        o.atStart.call(this, vis());
    }else{
        //not set
    }

/**/

    if(o.btnPrev)
        $(o.btnPrev).click(function() {
            return go(curr-o.scroll);
        });

Then pass in an additional parameter to the jCarousel initialisation:

$('#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');
    },
    atStart: function(a){
        //do your stuff
    }
});

Answer 3

beforeStart: function(a) { 
     $(a[0]).toggleClass('active').siblings().removeClass('active');

}

// Finished with only this little script