Simple Auto Playing Slideshow

Chris Coyier (@chriscoyier) tweeted some really nice simple code to get a slideshow up and running on your web page.

http://jsfiddle.net/chriscoyier/JTvVn/

I’ve copied his code into this post for future reference.

HTML

</pre>
<div id="slideshow">
<div><img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" /></div>
<div><img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg" alt="" /></div>
<div>Pretty cool eh? This slide is proof the content can be anything.</div>
</div>
<pre>

css

#slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

Javascript

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

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

Big thanks to Chris for this (http://css-tricks.com/)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s