CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chaddly
Chaddly

Reputation: 267

Create multiple image sliders

I've have an image slider but I need more than one slider on the same page. Is it possible to copy my function so it does not interfere with the original?

HTML

<div id="slideshow">
   <div>
     <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
</div>

CSS

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
}
#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

JQuery

$(function() {

            $("#slideshow > div:gt(0)").hide();

            setInterval(function() { 
              $('#slideshow > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow');
            },  3000);

});

Upvotes: 0

Views: 8186

Answers (3)

Evan Kennedy
Evan Kennedy

Reputation: 4175

I'm not sure if creating your own function is really necessary for this. Horen gave a good answer, but when implementing it, you realize that the code needs to be tweaked slightly to handle the code distinguishing between appending a child to its own slideshow or another one. For this, I used the .each() function to 'sandbox' each slideshow.

There was also an error when you use more than two pictures. The way I handled this is to hide all but the second image on load instead of just hiding the first.

Here's the final markup I used:

Demo: http://jsfiddle.net/F4nTJ/2/

css

.slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
}
.slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

html

<div class="slideshow">
   <div>
       <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"/>
   </div>
   <div>
       <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"/>
   </div>
</div>
<div class="slideshow">
   <div>
       <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"/>
   </div>
   <div>
       <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"/>
   </div>
</div>

javascript

$(function() {
    $(".slideshow").each(function(){$(this).children().not(":nth-child(2)").hide();});

    setInterval(function() {
        $('.slideshow').each(function(){
            $(this).children(':first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo($(this));
        });
    },  3000);
});

Upvotes: 2

dfsq
dfsq

Reputation: 193261

This is the situation when you should consider writing your own plugin:

$.fn.slider = function() {
    return this.each(function() {
        var $self = $(this); 
        $(this).children("div:gt(0)").hide();
        setInterval(function() {
            $self.children('div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo($self);
        }, 3000);
    });
};

$('.slideshow').slider();

http://jsfiddle.net/pnp8m/2/

Upvotes: 0

Horen
Horen

Reputation: 11382

Yes, give it a class instead of an id

In HTML change id="slideshow" to class="slideshow" and in CSS and jQuery change #slideshow to .slideshow

Then you can add a second (and more) slideshow containers to your HTML. Just change the nested image sources and you have different slideshows - fun!

Upvotes: 1

Related Questions