Simple slideshow

A simple jQuery slideshow

by bretmorris

HTML

<div class="slideshow">
    <div class="controls">
        <a class="prev" href="javascript:void(0);">Previous Slide</a> |
        <a class="next" href="javascript:void(0);">Next Slide</a>
    </div>
    <div class="slides">
        <img src="http://placekitten.com/300/500" width="300" height="500" />
        <img src="http://placekitten.com/200/400" width="200" height="400" />
        <img src="http://placekitten.com/500/400" width="500" height="400" />
    </div>
</div>

CSS

/* slideshow initialized w/ js */
.slideshow img { display: none; cursor: pointer; }

JavaScript

$('a.prev').click(function() {
    prevSlide($(this).parents('.slideshow').find('.slides'));
});
//clicking image goes to next slide
$('a.next, .slideshow img').click(function() {
    nextSlide($(this).parents('.slideshow').find('.slides'));
});

//initialize show
iniShow();

function iniShow() {
    //show first image
    $('.slideshow').each(function() {
        $(this).find('img:first').fadeIn(500);
    })
}

function prevSlide($slides) {
    $slides.find('img:last').prependTo($slides);
    showSlide($slides);
}

function nextSlide($slides) {
    $slides.find('img:first').appendTo($slides);
    showSlide($slides);
}

function showSlide($slides) {
    //hide (reset) all slides
    $slides.find('img').hide();
    //fade in next slide
    $slides.find('img:first').fadeIn(500);
}