Simple Slideshow with Next and Previous Buttons

Taking from: http://snook.ca/archives/javascript/simplest-jquery-slideshow I edited the script so that you can navigate through the photos using the previous/next buttons.

HTML

<div id="img-grp-wrap">
    <div class="img-wrap">
        <img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" />
        <img src="http://0.tqn.com/d/paganwiccan/1/G/T/1/-/-/BlackCat.jpg" />
        <img src="http://2.bp.blogspot.com/-H_iTYn3QQOk/Tfp5aK2vi5I/AAAAAAAAABM/QM45bNOM4HY/s1600/cat-claw.jpg" />
        <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" />
    </div>   
    
    <img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="Next"/> 
    <img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="Previous"/>
    
</div>

CSS

#img-grp-wrap {
    position: relative;
    width: 500px;
    height: 350px;
    margin: 10px auto;
}

.img-wrap {
    position: relative;
    border: 1px solid #CCC;
    width: 500px;
    height: 150px;
    overflow: hidden;
}

.img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: auto;
    -moz-box-shadow: 1px 1px 4px #CCC;
    padding: 0px;
}

.next, .prev {
    position: absolute;
    cursor: pointer;
    top: 70px;
}

.next {
    right: -40px;
}

.prev {
    left: -40px;
}

JavaScript

var imgFirst = $('#img-grp-wrap .img-wrap img');
$('#img-grp-wrap .img-wrap img:gt(0)').hide();

var rotate = setInterval(function() {
    slideShow();
}, 2000);

$('#img-grp-wrap .prev, #img-grp-wrap .next').hover(function() {
    clearInterval(rotate);
}, function() {
    rotate = setInterval(function() {
        slideShow();
    }, 2000);
});

$('#img-grp-wrap .next').click(function() {
    imgFirst.filter(":first-child") 
    .stop().fadeOut().next().fadeIn().end().appendTo('.img-wrap');
});

$('#img-grp-wrap .prev').click(function() {
    imgFirst.filter(":first-child").stop().fadeOut();
    $('#img-grp-wrap .img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
    imgFirst.filter(":first-child").fadeIn();
});

function slideShow() {
    imgFirst.filter(":first-child").fadeOut().next('img').fadeIn().end().appendTo('.img-wrap');
}