CODEWITHSUNDEEP
javascriptjquerycarouseljcarousellite
Staffan Estberg
Staffan Estberg

Reputation: 7035

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

Upvotes: 0

Views: 2376

Answers (3)

Jon Bytyqi
Jon Bytyqi

Reputation: 11

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

}

// Finished with only this little script

Upvotes: 0

trickyzter
trickyzter

Reputation: 1591

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

Upvotes: 0

Shawn
Shawn

Reputation: 136

Right after the initialization of your jCarouselLite,

do the following

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

Upvotes: 1

Related Questions