JQuery loop synchronization

Question

I defined two slide shows for the jQuery loop below:

    $('#slideShow').cycle({
        fx: 'fade',
        timeout: 3000,
        speed: 2000,
        random: 1
    });

    $('#slideText').cycle({
        fx: 'blindZ',
        timeout: 3000,
        speed: 2000,
        random: 1
    });

I checked manually and they are in sync. This is actually just luck or I need to define something like below to make sure they are in sync:

• set the timeout parameter to 0 in the loop to make sure that it will not be automatically updated.
• use the setInterval function at the same interval to start each loop.

Thanks for your kind help.

Answer 1

As long as you start your two slide shows one by one, that should be fine. Since they have the same timeouts and run together, they must remain in sync.

Otherwise, you can do something like this:

$('#slideShow').cycle({
    fx: 'fade',
    timeout: 3000,
    speed: 2000,
    random: 1,
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
          $('#slideText').cycle('next');
    }
});

$('#slideText').cycle({
    fx: 'blindZ',
    timeout: 0,
    speed: 2000,
    random: 1
});

The second slide show is deactivated, and the first sends the next command after each change.