两个滑块的 cycle2（或任何滑块）延迟最终同步

Question

我使用 cycle2 设置了两个轮播。它们并排显示，每个占据屏幕宽度的 50% 和高度的 100%。我在下面包含了一段视频，展示了它的外观。它们被设置为两个不同的 cycle2 init，然后在它们中的每一个上设置延迟以产生效果。

$('.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

我会尝试以下方法：

去掉第二个carrousel的自动初始化
以编程方式将侦听器添加到第一个传送带，就像这样$( '#1st-carousel' ).on( 'cycle-after', function( event, opts ) { ... })
侦听器将在固定时间后手动调用 $('#2nd-carousel').cycle('next');，使用 setTimeout 函数

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

两个滑块的 cycle2（或任何滑块）延迟最终同步

cycle2 (or any slider) delay for two sliders eventually sync up

javascript

jquery

delay

cycle2