Question

I am attempting to have 3 rotators on a page that run in a sequenced fashion but without synced transitions.

I wrote the below code, thinking I could set an interval function to run every second, keep a count of the times it is accessed, and modulus the result by ten to get my action points.

This however is not working as expected. #rotate2 starts as expected, then #rotate3, but then it goes back to #rotate2. Following things get really out of whack, slides disappear all together, etc.

I also tried upping the modulus to 30 and settings the action points at 9, 18, and 27. When I do that #rotate2 actual runs a second time before the console gets back to 9. It’s as if the timeout option is not being respected. Any suggestions?

JS Fiddle Link: http://jsfiddle.net/6yGET/2/

jQuery(function ($) {
    $(document).ready(function(){

        $('#rotate1, #rotate2, #rotate3').cycle({
            timeout: 0,
            speed: 'fast'
        });

        var count = 0;


        setInterval(
            function(){
                count++;

                console.log(count % 10);

                switch(count % 10){
                    case 3: // rotator 2 change
                            $('#rotate2').cycle('next');
                            break;
                    case 6: // rotator 3 change
                            $('#rotate3').cycle('next');
                            break;
                    case 9: // rotator 1 change
                            $('#rotate1').cycle('next');
                            break;
                }
            },
            1000 // interval every second
        );


    });
});

Answer 1

Its not so much that its ignoring your timeout but it seems that calling “next” is starting it cycling to get the next one. Its very strange behaviour going on though. I suspect it may be that its just not designed for being manually paged like this.

I have found a way to do what you want though. Which is to use the “delay” property and initialise each cycle separately with an appropriate delay on its first page.

    $('#rotate2').cycle({
        timeout: 10000,
        speed: 'fast',
        delay: 3000-10000
    });
    $('#rotate3').cycle({
        timeout: 10000,
        speed: 'fast',
        delay: 6000-10000
    });
    $('#rotate1').cycle({
        timeout: 10000,
        speed: 'fast',
        delay: 9000-10000
    });

This fiddle demonstrates: http://jsfiddle.net/6yGET/4/

The reason for the -10000 on each of the delays is because otherwise the first transition seems to happen after delay+timeout seconds.