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,

Answer 1

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');

Answer 2

In your above code you have used '1000' and '7000' for speed and timeout respectively.

You need to use number (like 1000 not '1000'). Maybe it's talking time to translate '1000' and '7000' which result initial delay.

Replace following in above code:

'speed' : '1000',
'timeout' : '7000'

by

'speed' : 1000,
'timeout' : 7000