Creating a Slideshow (^) ❘ 445
}
ul.slideshowControls {
list-style: none;
padding: 0 ;
margin: 0 ;
position: absolute;
z-index: 2 ;
}
ul.slideshowControls li {
float: left;
width: 10px;
height: 10px;
margin: 5px 0 0 5px;
border-radius: 5px;
background: black;
text-indent: -2000000px;
cursor: pointer;
border: 1px solid white;
overflow: hidden;
}
ul.slideshowControls li.slideshowControlActive {
background: white;
border: 1px solid black;
}
div#slide-1-1 img {
position: relative;
top: -200px;
}
div#slide-1-2 img {
position: relative;
top: -200px;
}
div#slide-1-3 img {
position: relative;
top: -600px;
}The preceding style sheet and HTML are accompanied by the following JavaScript, which completes
this example:
var slideshows = [];$.fn.extend({
slideshow : function()
{
return this.each(
function()
{
var node = $(this);if (typeof node.data('slideshow') === 'undefined')
{
var slideCollection = slideshows.length + 1;