Carousel with Thumbnails

Carousel with Thumbnails

by sarathsprakash

HTML

<div class="js-carousel">
    <div class="slidesContainer">
        <ul class="clearfix">
            <li class="slide green item-1">One</li>
            <li class="slide blue item-2">Two</li>
            <li class="slide red item-3">Three</li>
            <li class="slide yellow item-4">Four</li>
        </ul>
    </div>
    <!-- /slidesContainer -->
    <div class="thumbnailContainer">
        <ul>
            <li class="thumb green">	<a href="#">
						<div class="smallSlide"></div>
						<div class="thumbOverlay isActive"></div>
					</a>	
            </li>
            <li class="thumb blue">	<a href="#">
						<div class="smallSlide"></div>
						<div class="thumbOverlay"></div>
					</a>	
            </li>
            <li class="thumb red">	<a href="#">
						<div class="smallSlide"></div>
						<div class="thumbOverlay"></div>
					</a>	
            </li>
            <li class="thumb yellow">	<a href="#">
						<div class="smallSlide"></div>
						<div class="thumbOverlay"></div>
					</a>

            </li>
        </ul>
    </div>
    <!-- /thumbnailContainer -->
</div>
<!-- /carousel -->

CSS

.clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}
.slidesContainer {
    width:200px;
    height: 200px;
    overflow: hidden;
    margin-bottom: 10px;
}
.slidesContainer ul {
    margin: 0;
    padding: 0;
    width: 800px;
    /* Slides width times total slides */
    position: relative;
    top: 0;
    left: 0;
    list-style:none;
}
.slide {
    width: 200px;
    height: 200px;
    float: left;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.red {
    background-color: red;
}
.yellow {
    background-color: yellow;
}
.thumbnailContainer ul {
    margin: 0;
    padding: 0;
    width: 800px;
    /* Slides width times total slides */
    position: relative;
    top: 0;
    left: 0;
    list-style:none;
}
.thumb {
    width: 50px;
    height: 50px;
    display: inline-block;
    position: relative;
}
.thumb:hover {
    cursor: pointer;
}
.thumb a {
    display: block;
}
.thumbOverlay {
    background-color: gray;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 30%;
    left: 30%;
    display: none;
}
.thumbOverlay.isActive {
    display: block;
}

JavaScript

$(document).ready(function () {
    //initialize carousel
    carousel();

    //Initialize thumbnail rotation
    thumbnailLoop(0);
});
var slide_width;
var left_value;
function carousel() {
    slide_width = $('.slidesContainer li').outerWidth();
    left_value = slide_width * (-1);
    var speed = 3000;
    var run = setInterval('rotate(' + slide_width + ', ' + left_value + ')', speed);

    //Move the last slide before the first slide
    $('.slide:first').before($('.slide:last'));

    //set the default item to the correct position 
    $('.slidesContainer ul').css({
        'left': left_value
    });

    //Pause the slides on mouseenter.  Start the carousel again on mouseout
    $('.slidesContainer').hover(

    function () {
        clearInterval(run);
    },

    function () {
        run = setInterval('rotate(' + slide_width + ', ' + left_value + ')', speed);
    });
}

function rotate(s_width, l_value) {
    //get the correct position            
    var left_indent = parseInt($('.slidesContainer ul').css('left')) - s_width;

    $('.slidesContainer ul').animate({
        'left': left_indent
    },
    200,

    function () {
        //move the first item and put it as last item
        $('.slidesContainer li:last').after($('.slidesContainer li:first'));
        //set the default item to correct position
        $('.slidesContainer ul').css({
            'left': l_value
        });
    });
}

function thumbnailLoop(idx) {
    var thumbRun = setTimeout(function () {
        thumbnailLoop((idx + 1) % $('.thumbOverlay').length);
    }, 3000);

    //Remove the class .isActive and add the class to the next .thumbnailOverlay div
    $('.thumbOverlay').removeClass('isActive').eq(idx).addClass('isActive');

    //Pause the thumbnail rotating on mouseenter.  Restart on mouseout.
    $('.slidesContainer').hover(

    function () {
        clearInterval(thumbRun);
    },

    function () {
        thumbRun = setTimeout(function () {
           ...