The Great Nivo Slideshow
The Dev7Studios has become the one of easiest to use, most popular free slideshows around right now. https://nivo.dev7studios.com
And here’s a couple quick tips I’ve discovered when installing it:
Tip 1: For people still concerned about IE7 – make sure to remove that last comma.
<link rel=”stylesheet” href=”./css/nivo-slider.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”./js/jquery.nivo.slider.pack.js”></script>
<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect:’fade’,
animSpeed:200,
pauseTime:3500,
startSlide:0,
directionNav:false,
directionNavHide:true,
controlNav:false,
controlNavThumbs:false,
keyboardNav:true,
pauseOnHover:true /* No comma here! Or else it might not work in IE7 */
});
});
</script>
<div id=”slider” >
<a href=”#”><img src=”MY-SLIDE.jpg” border=”0″ alt=”My Slide Title” name=”My Slide Nme” /></a>
</div>
Tip 2: Also for IE7, but may cause problems in other browsers too. Make sure to enter the slide sizes when adding the animated loading gif.
.nivoSlider {
position:relative;
width:618px; /* Change this to your images width */
height:246px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
Update: to make your last slide stay put (pause / stop), make the end of your code look like this:
pauseOnHover:true,
lastSlide: function(){
$(‘#slider’).data(‘nivoslider’).stop();
}
Another update: A quick and easy way to pause one slide longer than the others is to simply double it up — using the fade effect, it appears to pause for longer.