christian christian - 2 years ago 91
jQuery Question

jQuery Cycle Multiple Slideshows In Succession, Initial Delay?

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


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++){
'delay' : 1000 * i,
'speed' : '1000',
'timeout' : '7000'

Thanks for any help,

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download