Simple Auto-Playing Slideshow

Avatar of Chris Coyier
Chris Coyier on (Updated on )


Wrapper with divs as the slides, which can contain any content:

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


Slides need to be absolutely positioned within the wrapper. This has a tiny bit of extra pizazz:

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


Run after DOM is ready.

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

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

See it

Very similar one from Snook.