This Mootools class realises a basic slideshow with navigation buttons. Just the images, no extra data will be shown.
Make a list of images just like in the demo or see the html source code below.
The css
Note the properties for the ‘#image img’. The ‘position: absolute’ and the ‘opacity: 0′ are necessary for this class.
#image {
padding: 52px 20px 10px 20px;
width: 580px;
height: 420px;
background: url(image.png) top right no-repeat;
}
#image img {
cursor: pointer;
width: 540px;
height: 405px;
position: absolute;
opacity: 0;
}
#nav {
margin: 0px auto;
width: 400px;
}
.nav_button {
cursor: pointer;
list-style-type: none;
float: right;
margin-left: 10px;
width: 40px;
height: 40px;
}
.non_active {
cursor: default;
opacity: 0;
}
.nav_button:hover {
background: url(nav.jpg);
}
#stat {
list-style-type: none;
padding-top: 18px;
font: bold 12px Verdana, Geneva, sans-serif;
color: #666;
}
The html
The list item #stat is for the image count.
The usage
Ajust these parameters to make a slideshow to your own preferences.
window.addEvent('domready', function() {
var slideshow = new cvSlideShow({
images: '.image',
buttons: '.nav_button',
autoplay: true, //bool
nextbutton: 'nav_next',
prevbutton: 'nav_prev',
pauzebutton: 'nav_play',
statbut: 'stat',
showtime: 2000, //milliseconds
duration: 500 //milliseconds
});
});
