javascript - 将活动状态添加到 jCarousel Lite 中的第一项

Question

当我初始化 jCarousel Lite 时，我希望能够向列表中的第一个元素添加“class="active"”状态。在不修改插件的情况下如何解决这个问题？

当前设置 -

$('#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

在你的 jCarouselLite 初始化之后，

请执行下列操作

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

Answer 2

如果我偏离轨道，请提前道歉。你不能在初始化 jCarouselLite 之前添加这个类吗？

将注释标记之间的代码添加到 jCarousel 源代码中。

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

然后将一个附加参数传递给 jCarousel 初始化：

$('#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');

}

// 只用这个小脚本就完成了