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

Add active state to first item in jCarousel Lite

本文关键字：第一个 项目 Lite jCarousel 活动状态 添加      更新时间：2023-09-26

当我初始化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');
    }
});

在初始化jCarouselLite之后，

执行以下

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

如果我偏离轨道，请提前道歉。你不能在初始化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
    }
});

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

}

//只完成了这个小脚本

相关文章：