Simple Auto Playing Slideshow

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

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


<div id="slideshow">
<div><img src="" alt="" /></div>
<div><img src="" alt="" /></div>
<div>Pretty cool eh? This slide is proof the content can be anything.</div>


#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;


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

setInterval(function() {
  $('#slideshow > div:first')
},  3000);

Big thanks to Chris for this (


Leave a Reply

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

You are commenting using your 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