سؤال

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');
    }
});
هل كانت مفيدة؟

المحلول

Right after the initialization of your jCarouselLite,

do the following

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

نصائح أخرى

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
    }
});
beforeStart: function(a) { 
     $(a[0]).toggleClass('active').siblings().removeClass('active');

}

// Finished with only this little script

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top