將活動狀態添加到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中的第一個項目

回答

相關問題