Carousel with Thumbnails

Carousel with Thumbnails

HTML

<div class="js-carousel">
	<div id="recomendaciones">
	<ul class="clearfix">
			<li class="slide" style='text-align:center;'><a target='_blank' href='https://formacion.trabajarporelmundo.org/curso-online-ingles-preparacion-ielts/txmiframes?utm_source=TrabajarporelMundo&utm_medium=display&utm_campaign=idiomas' title='Prepara online el IELTS'><img class='img-responsive' src='https://d39hlhu7k6bjuh.cloudfront.net/print_image.php?id=306' alt='Prepara online el IELTS'></a></li><li class="slide" style='text-align:center;'><a target='_blank' href='https://formacion.trabajarporelmundo.org/first-certificate/txmiframes?utm_source=TrabajarporelMundo&utm_medium=display&utm_campaign=idiomas' title='Prepara online el FIRST CERTIFICATE'><img class='img-responsive' src='https://d39hlhu7k6bjuh.cloudfront.net/print_image.php?id=307' alt='Prepara online el FIRST CERTIFICATE'></a></li><li class="style" style='text-align:center;'><a target='_blank' href='https://formacion.trabajarporelmundo.org/toefl/txmiframes?utm_source=TrabajarporelMundo&utm_medium=display&utm_campaign=idiomas' title='Prepra online el TOEFL'><img class='img-responsive' src='https://d39hlhu7k6bjuh.cloudfront.net/print_image.php?id=308' alt='Prepra online el TOEFL'></a></li><li class="slide" style='text-align:center;'><a target='_blank' href='https://formacion.trabajarporelmundo.org/curso-de-frances-y-aleman/txmiframes?utm_source=TrabajarporelMundo&utm_medium=display&utm_campaign=idiomas' title='Curso de alemán o francés a elegir 29 euros'><img class='img-responsive' src='https://d39hlhu7k6bjuh.cloudfront.net/print_image.php?id=309' alt='Curso de alemán o francés a elegir 29 euros'></a></li><li class="slide" style='text-align:center;'><a target='_blank' href='https://formacion.trabajarporelmundo.org/english-as-a-foreign-language/txmiframes?utm_source=TrabajarporelMundo&utm_medium=display&utm_campaign=idiomas' title='Hazte Profesor de Inglés para Extranjeros'><img class='img-responsive'...

CSS

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

#recomendaciones {
    overflow: hidden;
    margin-bottom: 10px;
}

#recomendaciones ul {
	margin: 0;
	padding: 0;
	width: 800px; /* Slides width times total slides */
	position: relative;
	top: 0;
	left: 0;
    list-style:none;
}

.slide {
	float: left;
}

.green {background-color: green;}
.blue {background-color: blue;}
.red {background-color: red;}
.yellow {background-color: yellow;}

JavaScript

$(document).ready(function() {
    //initialize carousel
    	var slideCount = $('#recomendaciones ul li').length;
						var slideWidth = $('#recomendaciones ul li').width();
						var slideHeight = $('#recomendaciones ul li').height();
						var sliderUlWidth = slideCount * slideWidth;

						$('#recomendaciones').css({width: slideWidth, height: slideHeight});

						$('#recomendaciones ul').css({width: sliderUlWidth, marginLeft: -slideWidth});

						$('#recomendaciones ul li:last-child').prependTo('#recomendaciones ul');
    carousel();
    
});

function carousel() {
    var slide_width = $('#recomendaciones li').outerWidth();
    var 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 
    $('#recomendaciones ul').css({'left' : left_value});
    
   
}

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

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