Trying to 'stagger' multiple Nivo-Sliders, but they are always in-sync

Question

I'm trying to stagger a Nivo Slider so that one starts 8000ms after page load, and the next one at 12000ms, and they stay stagggered 4000ms apart, sliding every 8000ms.

I have a minimal JSfiddle showing the issue at: http://jsfiddle.net/0gfaaqp6/ - Basically trying to use a setTimeout on the 2nd slider as below:

setTimeout($('#slider2').nivoSlider({pauseTime: 8000}), 4000);

Even though I delay the start of the 2nd slider by 4000 ms, the sliders still sync up immediately. :(

I have tried other attempts as well with a "beforeChange" function and delays, but I get the same results that way; two sliders always sync up. (Possible/slightly related question here.)

Anyone have any ideas how to stagger the sliding with two nivo-sliders?

Answer 1

Here's a working fiddle. I just changed the timings a little to make it more obvious that they're staggered. http://jsfiddle.net/manishie/hmnsy848/

Code:

$('#slider1')
    .nivoSlider({
    effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed: 500, // Slide transition speed
    pauseTime: 3000, // How long each slide will show
    directionNav: false,
    controlNav: false, // 1,2,3... navigation
    keyboardNav: false, // Use left & right arrows
    pauseOnHover: false, // Stop animation while hovering
    randomStart: false, // Start on a random slide
}).delay(1000)
    .queue(function () {
    $('#slider2').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        directionNav: false,
        controlNav: false, // 1,2,3... navigation
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: false, // Stop animation while hovering
        randomStart: false, // Start on a random slide
    });
});