jQuery Cycle Multiple Slideshows In Succession, Initial Delay?

Question

I have a banner with a grid featuring 8 slideshows that I would like to run in succession.

I've got everything working, but for some reason there is a long delay before the first transition starts that I can not figure out.

Here's what i've tried thus far

$(document).ready(function(){

var $banner = $('.banner');

var sets = [".r1-c1", ".r2-c4", ".r1-c6", ".r2-c2", ".r1-c5", ".r1-c3", ".r2-c6", ".r2-c1"];

for(var i = 0; i < sets.length; i++){
    $banner.find(sets[i]).cycle({
        'delay' : 1000 * i,
        'speed' : '1000',
        'timeout' : '7000'
    })
}
});

Thanks for any help,

christian christian · Accepted Answer · 2014-03-07T18:03:24

I fixed the issue by changing the methodology.

Instead of trying to run the slideshows at the same time, relying on delays to have them transition in succession, I set all slideshows to activate manually.

Here's the code I used. It uses a "sets" array of unique selectors which contain the slide sets. The transitions will happen in the order given.

var $banner = $('.banner');
var sets = [".r1-c1", ".r2-c4", ".r1-c6", ".r2-c2", ".r1-c5", ".r1-c3", ".r2-c6", ".r2-c1"];
var current = 0;

// setup slideshows

$.each(sets, function(index,value){
    $banner.find(value).cycle({
        'timeout' : 0,
        'speed' : 1000,
        'skipInitializationCallbacks' : true,
        'after' : onAfter
    });
});

// run after slide transition

function onAfter(){
    $banner.find(sets[current++ % sets.length]).cycle('next');
}

// initiate first slideshow

$banner.find(sets[0]).cycle('next');

jQuery Cycle Multiple Slideshows In Succession, Initial Delay?

2 Answers