Simple JavaScript slide shows are a very useful way of slickly displaying images on any site. I recently found my way on to DZone Snippets which provided a nice little article on creating a slide show, so, I thought it would be nice to take that script and add to it slightly making it easier for anyone to add it to their site.
the code
The code is very simple, requiring the inclusion of the following JavaScript files prototype.js, scriptaculous.js, effects.js and simple-slide-show.js. These provide the foundation of the slide show with very little HTML and CSS needed to complete the example.
HTML
The HTML consists of a div containing an unordered list (ul) of the required images. Both the containing div and ul have an id assigned to allow for easy styling without clashes.
<ul id="slide-images">
<li><img src="images/one.jpg" alt="One" title="One" /></li>
<li><img src="images/two.jpg" alt="Two" title="Two" /></li>
<li><img src="images/three.jpg" alt="Three" title="Three" /></li>
<li><img src="images/four.jpg" alt="Four" title="Four" /></li>
</ul>
</div>
CSS
The CSS is also very simple. The ul is given a width and a height defining the size of the slide show area and finally the li tags are absolutely positioned one on top of the other and that’s it. The rest is all done with JavaScript magic.
position:relative;
display:block;
margin:0px;
padding:0px;
width:400px;
height:300px;
overflow:hidden;
}
#slide-images li{
position:absolute;
display:block;
list-style-type:none;
margin:0px;
padding:0px;
background-color:#FFFFFF;
}
#slide-images li img{
display:block;
background-color:#FFFFFF;
}
example
Please click to see the Simple JavaScript Slide Show example.
download
Please feel free to download the Simple JavaScript Slide Show code.
