CODEWITHSUNDEEP
jqueryslideshowtiming
Ria
Ria

Reputation: 39

3 slideshows on one page, jquery

I am trying to get 3 slideshows to run on a page but at different speeds/times. I have created a fiddle that can be found here... http://jsfiddle.net/zq7XG/ any idea how I can make them act differently? I really need these to change at different times.

Thanks in advance!

$(document).ready(function(){$('.slideshow').cycle({fx:'fade'});});




<div class="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/>
</div>

<div class="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/>
</div>

<div class="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200"/>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200"/>
</div>

Upvotes: 0

Views: 1467

Answers (2)

sanman
sanman

Reputation: 57

I have done slight change in your code.

Please find the changes I have tried as follows;

JS Fiddle Example

Hope that helps

Upvotes: 1

imjared
imjared

Reputation: 20584

Add an ID to each then call cycle on each one.

<div class="slideshow" id="slideshow-1">...</div>
<div class="slideshow" id="slideshow-2">...</div>
<div class="slideshow" id="slideshow-3">...</div>

$(document).ready(function() {
    $('#slideshow-1').cycle({
        fx: 'fade',
        timeout: 5000,
    });

    $('#slideshow-2').cycle({
        fx: 'fade',
        timeout: 9000,
    });

    ...

});

Upvotes: 1

Related Questions