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

}

//只用这个小脚本完成

将活动状态添加到jCarousel Lite中的第一个项目

3 个答案: