Cómo crear un sencillo carrusel infinito con jQuery

El CSS es algo más complicado. Lo primero que hay que hacer es ajustar el ancho correcto en #carrusel, #paneles, #paneles ul y #paneles li. Desglosaremos el CSS y le colocaremos comentarios a todo, y si quieres hacerle cambios, te recomiendo que empieces a partir del elemento LI en la secuencia descrita a continuación:

• #paneles li:
• #paneles ul: el ancho es el ancho total de los elementos #ul li
• #paneles: el ancho y el alto deberían ser los mismos de los elementos #ul li
• #carrusel: el ancho debería ser ligeramente superior al de los elementos #ul li, pero no la altura porque ésta incluye también la altura de los botones

#carrusel {
	width:255px;
	height:290px;
	margin:0 auto;
}

#paneles {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:250px;
	height:250px;
	border:1px solid #ccc;
}

/* eliminar estilos de lista, width: ancho del elemento x total de elementos */
#paneles ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;
	width:750px;
}

/* ancho del elemento; en este caso es un gif de 250x250px */
#paneles li {
	width:250px;
	height:250px;
	float:left;
}

#paneles li img {
	padding:5px;
}

/* estilo para los botones "anterior" y "siguiente" */
#botones {
	padding:0 0 5px 0;
	float:right;
}

#botones a {
	display:block;
	width:31px;
	height:32px;
	text-indent:-999em;
	float:left;
	outline:0;
}

a#anterior {
	background:url(arrow.gif) 0 -31px no-repeat;
}

a#anterior:hover {
	background:url(arrow.gif) 0 0 no-repeat;
}

a#siguiente {
	background:url(arrow.gif) -32px -31px no-repeat;
}

a#siguiente:hover {
	background:url(arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}

• after – inserta contenido después de cada uno de los elementos correspondientes
• before – inserta contenido antes de cada uno de los elementos correspondientes

Así que para crear un carrusel infinito tenemos que depender de estos dos métodos, porque habrá que tener en cuenta que:

• si el usuario hace clic sobre el botón “anterior”, tendremos que colocar el último elemento delante del primero
• si el usuario hace clic sobre el botón “siguiente”, tendremos que colocar el primer elemento detrás del último

Como resultado de eso, cada vez que hagamos clic sobre el botón “siguiente” o “anterior”, el script seguirá moviendo el elemento y eso lo convertirá en un carrusel infinito.

Como nota final, hemos usado un método muy simple pero efectivo para hacer rotar el carrusel: usar la función click() para hacer clic en el siguiente enlace y colocarle un temporizador.

$(document).ready(function() {

	//velocidad de rotación y temporizador
	var speed = 5000;
	var run = setInterval('rotate()', speed);

	//tomar el ancho y calcular el valor izquierdo
	var item_width = $('#paneles li').outerWidth();
	var left_value = item_width * (-1);

	//poner el último elemento antes del primero, por si el usuario pulsa "anterior"
	$('#paneles li:first').before($('#paneles li:last'));

	//colocar el elemento por defecto en la posición correcta
	$('#paneles ul').css({'left' : left_value});

	//si el usuario pulsó "anterior"
	$('#anterior').click(function() {

		//tomar la posición derecha
		var left_indent = parseInt($('#paneles ul').css('left')) + item_width;

		//animar el elemento
		$('#paneles ul').animate({'left' : left_indent}, 200,function(){

			//mover el último elemento y ponerlo como primero
			$('#paneles li:first').before($('#paneles li:last'));

			//colocar el elemento por defecto en la posición correcta
			$('#paneles ul').css({'left' : left_value});

		});

		//cancelar el comportamiento del enlace
		return false;

	});

	//si el usuario pulsó "siguiente"
	$('#siguiente').click(function() {

		//tomar la posición derecha
		var left_indent = parseInt($('#paneles ul').css('left')) - item_width;

		//animar el elemento
		$('#paneles ul').animate({'left' : left_indent}, 200, function () {

			//mover el primer elemento y ponerlo como último
			$('#paneles li:last').after($('#paneles li:first'));

			//colocar el elemento por defecto en la posición correcta
			$('#paneles ul').css({'left' : left_value});

		});

		//cancelar el comportamiento del enlace
		return false;

	});

	//si se hace hover con el ratón pausar la autorotación, y si no, rotar
	$('#paneles').hover(

		function() {
			clearInterval(run);
		},
		function() {
			run = setInterval('rotate()', speed);
		}
	);

});

//una sencilla función para hacer clic en el siguiente enlace
//un temporizador llamará a esta función, y comenzará la rotación
function rotate() {
	$('#siguiente').click();
}

Aquí tenéis una demo de cómo funciona el carrusel de imágenes, y podéis bajaros un .zip con el código desde este enlace.

Fuente y créditos: Create a Simple Infinite Carousel with jQuery [queness]
Autor: Kevin Liew
Descripción: Kevin es un diseñador y desarrollador web cuya pasión y afición es contribuir a la industria del desarrollo web. Es el propietario de Queness.com, una página que nos proporciona ideas para diseño web, consejos de CSS, HTML y jQuery, trucos y tutoriales. También podéis seguirle en Twitter.