Cycle 2 synchronized slideshows with delays between slideshow cycles

Question

When using the synchronized slide show example from cycle2 API, i am trying to add a sequential delay between slideshows; for eg: 5s, 10s, 15s, 20s ... ie the first div.cycle-slideshow will start in 5s then the second will be triggered at 10s then next by 15s and next by 20s then the first will start again at 25s and cycle goes on. http://jsfiddle.net/azeef/Pefen/

How can i achieve that ?

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-reverse=true
    data-cycle-timeout=5000
    data-index=1
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
</div>

<div class="cycle-slideshow" 
    data-cycle-fx=scrollVert
    data-cycle-timeout=10000
    data-index=2
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
</div>

<div class="cycle-slideshow" 
    data-cycle-fx=scrollVert
    data-cycle-timeout=15000
    data-cycle-reverse=true
    data-index=4
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
</div>

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=20000
    data-index=3
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
</div>

Answer 1

Use the delay option in combination with a timeout of 20s for each slideshow. You can set a negative delay, so the first slideshow starts after five seconds and then waits twenty more.

<div id=container>
    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-reverse=true
        data-cycle-timeout=20000
        data-cycle-delay="-15000"
        data-index=1
        ><!-- slides --></div>

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollVert
        data-cycle-timeout=20000
        data-cycle-delay="-10000"
        data-index=2
        ><!-- slides --></div>

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollVert
        data-cycle-timeout=20000
        data-cycle-delay="-5000"
        data-cycle-reverse=true
        data-index=4
        ><!-- slides --></div>

    <div class="cycle-slideshow" 
        data-cycle-fx=scrollHorz
        data-cycle-timeout=20000
        data-cycle-delay="0"
        data-index=3
        ><!-- slides --></div>
</div>

http://jsfiddle.net/mblase75/m4a7X/