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

当我初始化jCarousel Lite时，我希望能够为列表中的第一个元素添加'class ='active''状态。我如何在不修改插件的情况下处理这个问题？将活动状态添加到jCarousel Lite中的第一个项目

当前设置 -

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

来源

2012-04-05 Staffan Estberg

权的jCarouselLite初始化后，

做以下

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

来源

2012-04-05 13:59:25 Shawn

谢谢，这将不得不做，直到有一个内置的功能。 – 2012-04-09 10:54:43

道歉提前如果我的方式偏离了轨道。在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 
    } 
});

来源

2012-04-05 13:11:36 trickyzter

对不起，我没有解释它有点误导。我在寻找的是jCarousel Lite选项中的回调函数（“atStart”函数，类）。 – 2012-04-05 16:31:41

不幸的是一个不存在，但是你可以在源代码中轻松添加一个。我知道你不想修改插件，但是这是一个小改动，很可能会在未来版本中进行移植。 – trickyzter 2012-04-05 17:02:24

谢谢。我使用一个简单的addClass来解决它，就像上面提供的示例Shawn一样。 – 2012-04-09 10:54:31

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

}

//完成后只有这个小脚本

来源

2017-12-07 14:18:39

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

回答

相关问题