Easy, Breezy jQuery Slideshow

This has been used in more than five client projects. Very reliable and cross browser compatible.

by AndyMP

HTML

<div id="slideshow"> 
    
    <ul>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://www.google.com/logos/2011/persiannewyear11-hp.jpg" alt="persiannewyear11-hp" /></a> 
            
        </li>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://www.google.com/logos/2011/holi11-hp.jpg" alt="holi11-hp" /></a> 
            
        </li>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://www.google.com/logos/2011/sayeddarwish11-hp.jpg" alt="sayeddarwish11-hp" /></a> 
            
        </li>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://www.google.com/logos/2011/okamoto11-hp.jpg" alt="okamoto11-hp" /></a> 
            
        </li>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://www.google.com/logos/2011/eisner11-hp.jpg" alt="eisner11-hp" /></a> 
            
        </li>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://www.google.com/logos/2011/jfkinaugural11-hp.jpg" alt="jfkinaugural11-hp" /></a> 
            
        </li>
        
    </ul> 
    
</div> 

<a href="#" id="next">Next</a>
<br />
<a href="#" id="prev">Prev</a>

CSS

#slideshow {
    height: 300px;
    position:relative;
    top:0;
    left:0;
}

#slideshow ul, #slideshow li {
    margin:0;
    padding:0;
    list-style-type:none;
    
}

.slideshow_item {
    position:absolute;
    left:0;
    top:0;
    list-style-type:none;
}

.slideshow_item img {
    margin:0;
    padding:0;
    vertical-align:bottom;
}

JavaScript

/* home slide show */

var $slides = $('.slideshow_item');
var slide_pos = 0;
var slide_len = $('.slideshow_item').length;

$slides.filter(':gt(0)').hide();

slide_int = setInterval(function() {
    $('#next').click();
}, 8000);

$('#next').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(++slide_pos % slide_len).fadeIn(500);
    
    //clearInterval(slide_int);
});

$('#prev').click(function() {
    $slides.eq(slide_pos % slide_len).fadeOut(500);
    $slides.eq(--slide_pos % slide_len).fadeIn(500);
    
    //clearInterval(slide_int);
});