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>
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>