週期2（或任何滑塊）兩個滑塊的延遲最終會同步

Question

我有兩個使用cycle2設置的傳送帶。它們並排放置，每個佔據屏幕寬度的50％和100％的高度。我在下面包含了一個視頻。這些被設置爲兩個不同的cycle2，然後在它們中的每一個上設置延遲以產生效果。

$('.vertical-slider-container .vertical-slider').each(function() { 
    var $this = $(this); 
    $this.cycle({ 
     fx: 'scrollVert', 
     slides: '> .each-slide', 
     sync: true, 
     timeout: 3000, 
     speed: 1500, 
     random: false, 
     loader: true, 
     swipe: true 
    }); 
}); 

<div class="vertical-slider left" data-cycle-delay="1000" data-cycle-reverse="true"></div> 
<div class="vertical-slider right" data-cycle-delay="1500" data-cycle-reverse="true"></div> 

我遇到的問題是最終它們會同步。是否有任何明顯的方法可以保持這些一致性，以便始終保持不變的延遲？

http://quick.as/6oq8hqar1

Answer 1

我會嘗試以下方法：

1. 刪除第二傳送帶的自動初始化
2. 編程方式將偵聽器添加到第1傳送帶，像這樣$('#1st-carousel').on('cycle-after', function(event, opts) { ... })
3. 監聽器將在固定時間後使用setTimeout功能手動呼叫$('#2nd-carousel').cycle('next');

演示：http://jsbin.com/hiduyi/1/edit?html,js