Is there a way to add a sequential delay between slideshows in the synchronized slide show example from cycle2 API? For example, having each div.cycle-slideshow start at 5s intervals (5s, 10s, 15s, 20s...). The cycle would then repeat with the first div starting again at 25s and continuing on. http://jsfiddle.net/azeef/Pefen/
I am looking for a solution to achieve this. Any suggestions?
<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>