頁面上有多個jQuery傳送帶

Question

我一直在關注this tutorial來創建一個傳送帶，到目前爲止它運行良好，但我是初學者，我需要在單個頁面上運行此傳送帶的多個實例。轉盤出現並且實際上工作，但是它們在設定的延遲時間同時動畫，並且當點擊下一個/上一個按鈕或者分頁點時。我需要他們獨立運行。我真的很感激任何建議。

謝謝

Answer 1

分開您的傳送帶與個人課程。在事件函數改一下這樣的代碼

Zippy.prototype.events = function(){ 
    this.$el 
     .on('click',this.settings.arrowRight,{direction:'right'},this.changeSlide) 
     .on('click',this.settings.arrowLeft,{direction:'left'},this.changeSlide) 
     .on('click','.indicators li',this.changeSlide); 
}; 

演示：http://codepen.io/barrel/pres/oBefw

Answer 2

可能的點擊事件處理的類不是ID。

Answer 3

在你的代碼

某處，你有這樣的事情：

var args = { 
    arrowRight : '.arrow-right', //A jQuery reference to the right arrow 
    arrowLeft : '.arrow-left', //A jQuery reference to the left arrow 
    speed : 1000, //The speed of the animation (milliseconds) 
    slideDuration : 4000 //The amount of time between animations (milliseconds) 
}; 

$('.carousel').Zippy(args); 

在這裏使用args1，args2 ，args3等每個滑塊和使用不同類的旋轉木馬（例如carousel1，carousel2，carousel3等）

然後更改slideDuration速度等，所以第一個滑塊將

var args1 = { 
    arrowRight : '.arrow-right', //A jQuery reference to the right arrow 
    arrowLeft : '.arrow-left', //A jQuery reference to the left arrow 
    speed : 1000, //The speed of the animation (milliseconds) 
    slideDuration : 4000 //The amount of time between animations (milliseconds) 
}; 

$('.carousel1').Zippy(args1); 

第二滑塊將

var args2 = { 
    arrowRight : '.arrow-right', //A jQuery reference to the right arrow 
    arrowLeft : '.arrow-left', //A jQuery reference to the left arrow 
    speed : 2000, //The speed of the animation (milliseconds) 
    slideDuration : 5000 //The amount of time between animations (milliseconds) 
}; 

$('.carousel2').Zippy(args2);