Question

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

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

我会尝试以下方法：

删除第二个转盘的自动初始化
以编程方式为第一个转盘添加一个监听器，如$( '#1st-carousel' ).on( 'cycle-after', function( event, opts ) { ... })
听众会在一段固定时间后使用$('#2nd-carousel').cycle('next');功能

setTimeout

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

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

1 个答案: