Jquery Simple Carosuel

by aaronk85

HTML

<div class="maincarousel">
       <div class="showarea"><a href="#"><img src="" alt="image1" title="image1" /></a></div>
       <div class="showarea"><a href="#"><img src="" alt="image2" title="image2" /></a></div>
       <div class="showarea"><a href="#"><img src="" alt="image3" title="image3" /></a></div>
       <a href="#carouselPrev" class="leftarrow" title="Previous">Previous</a>
       <a href="#carouselNext" class="rightarrow" title="Next">Next</a>
    </div>

JavaScript

$('div.showarea').fadeOut(0);
$('div.showarea:first').fadeIn(500);

$('a.leftarrow, a.rightarrow').click( function (ev) {
    //prevent browser jumping to top
    ev.preventDefault();

    //get current visible item
    var $visibleItem = $('div.showarea:visible');

    //get total item count
    var total =  $('div.showarea').length;

    //get index of current visible item
    var index = $visibleItem.prevAll().length;

    //if we click next increment current index, else decrease index
    $(this).attr('href') === '#carouselNext' ? index++ : index--;

    //if we are now past the beginning or end show the last or first item
    if (index === -1){
       index = total-1;
    }
    if (index === total){
       index = 0
    }

    //hide current show item
    $visibleItem.hide();

    //fade in the relevant item
    $('div.showarea:eq(' + index + ')').fadeIn(500);

});