将活动状态添加到 jCarousel Lite 中的第一项答案

【问题标题】：Add active state to first item in jCarousel Lite将活动状态添加到 jCarousel Lite 中的第一项
【发布时间】：2012-04-05 12:33:18
【问题描述】：

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

【问题讨论】：

标签： javascript jquery carousel jcarousellite

【解决方案1】：

在你的 jCarouselLite 初始化之后，

执行以下操作

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

【讨论】：

谢谢，在有内置功能之前必须这样做。

【解决方案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
    }
});

【讨论】：

抱歉，我确实解释的有点误导。我正在寻找的是 jCarousel Lite 选项中的回调（某种“atStart”函数）。
不幸的是，它不存在，但是您可以轻松地在源代码中添加一个。我知道您不想修改插件，但这是一个很小的更改，很可能会在未来的版本中迁移。
谢谢。我使用一个简单的 addClass 解决了它，就像上面提供的示例 Shawn 一样。
没有问题，无论是最适合您的解决方案。

【解决方案3】：

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

}

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

【讨论】：