CODEWITHSUNDEEP
jquery
green_arrow
green_arrow

Reputation: 1277

jQuery cycle plugin staggered/increment

I am currently using the jquery cycle plugin. I have 3 different slideshows which sit next to each other and cycle through at the same time. What I would like to do is set the first slideshow off first, then the second one and then the third one. Is there anyway I can do this with an increment or a timeout?

<div class="cycle" id="one">
   <img src="one.jpg" alt="" />
   <img src="two.jpg" alt="" />
   <img src="three.jpg" alt="" />
</div>
<div class="cycle" id="two">
   <img src="two.jpg" alt="" />
   <img src="three.jpg" alt="" />
   <img src="one.jpg" alt="" />
</div>
<div class="cycle" id="three">
   <img src="three.jpg" alt="" />
   <img src="one.jpg" alt="" />
   <img src="two.jpg" alt="" />
</div>

$('.cycle').cycle({
   fx:'fade',
   speed:1000
});

Upvotes: 4

Views: 170

Answers (2)

Talha Akbar
Talha Akbar

Reputation: 10040

var i = 1;
var x = $(".cycle").length;
var w = setInterval( function() {
if(i==x) {
window.clearInterval(w);
}
else {
$(".cycle:nth-child('+i+')").cycle({
   fx:"fade",
   speed:1000
});
i++;
}
}, 3000);

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191819

var timeout = 0;

$(".cycle").each(function () {
   var $this = $(this);
   setTimeout(function () {
      $this.cycle({
         fx: "fade", speed: 1000
      });
   }, timeout);

   timeout += 2000;
});

Upvotes: 3

Related Questions