Search code examples
javascriptjquerydelaycycle2

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

I have two carousels set up using cycle2. They are presented side by side with each occupying 50% of the screen width and 100% height. I've included a video below of what it looks like. These are set up as two different cycle2 inits then a delay is set on each of them to give the effect.

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

The issue I am having is that eventually they get in sync. Is there any obvious way I can keep these consistent so they always have the delay that remains constant?

http://quick.as/6oq8hqar1

Solution

  • I would try the following:

    1. Remove the auto-initialization of the 2nd carrousel
    2. Programatically add a listener to the 1st carrousel, like so $( '#1st-carousel' ).on( 'cycle-after', function( event, opts ) { ... })
    3. The listener would manually call $('#2nd-carousel').cycle('next'); after a fixed amount of time, using the setTimeout function

    Demo: http://jsbin.com/hiduyi/1/edit?html,js