Cómo hacer un sencillo carrusel de imágenes con jQuery

Escrito por Iteisaburo el 3 de abril de 2010 | 1 comentario home title

¿Eres fotógrafo, dibujante o diseñador y quieres sorprender a los visitantes de tu web con una muestra de tus últimos trabajos? ¿Quieres dar un aspecto atractivo a tu portafolio con un carrusel de imágenes que puede hacerse con unas pocas líneas de código?

Entonces sigue los sencillos pasos que te mostramos en este tutorial y pronto podrás crear tu propia galería de imágenes.

Básicamente, los pasos que tenemos que realizar son:

mostrar sólo la primera imagen y ocultar las demás
colocar una clase “actual” en la lista de elementos
sólo hay que ejecutar la función una vez cuando tenga el estado “actual”

Eso es todo, así de fácil. Pasamos a ver el código:

HTML

		<div class="carrusel">
			<ul class="listaReciente">
				<li><a class="actual" href="#imagen1">1</a></li>
				<li><a href="#imagen2">2</a></li>
				<li><a href="#imagen3">3</a></li>
			</ul>
			<img id="imagen1" src="imagen-1.gif" alt="Imagen 1 del carrusel" />
			<img id="imagen2" src="imagen-2.gif" alt="Imagen 2 del carrusel" />
			<img id="imagen3" src="imagen-3.gif" alt="Imagen 3 del carrusel" />
		</div>

CSS

En este ejemplo la lista desordenada tiene posición absoluta, y de esa forma podemos posicionar fácilmente los elementos de la lista sobre las imágenes.


		.carrusel
		{
			position: relative;
			background: #fafafa;
			width: 403px;
			height: 240px;
			border: 1px solid #e5e5e5;
			margin-bottom: 20px;
		}

		.carrusel img
		{
			position: absolute;
			top: 3px;
			left: 3px;
			z-index: 10;
			background: #fff;
		}

		ul.listaReciente
		{
			position: absolute;
			bottom: 12px;
			right: 4px;
			list-style: none;
			z-index: 20;
		}

		ul.listaReciente li { display: inline; }

		ul.listaReciente li a, ul.listaReciente li a:visited
		{
			display: block;
			float: left;
			background: #e5e5e5;
			padding: 4px 8px;
			margin-right: 1px;
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}

		ul.listaReciente li a:hover, ul.listaReciente li a:visited:hover
		{
			background: #666; color: #fff;
		}

		ul.listaReciente li a.actual
		{
			background: #f00;
			color: #fff;
		}

jQuery

Vamos a asegurarnos de que cuando un elemento de la lista posea la clase “actual”, el script no se ejecute otra vez.

		$(function()
		{
			var imgWrapper = $('.carrusel > img');

			// mostrar sólo la primera imagen, ocultar el resto

			imgWrapper.hide().filter(':first').show();

			$('ul.listaReciente li a').click(function ()
			{
				// comprobar si este elemento no tiene class="actual"
				// si tiene class="actual" no debe ejecutar el script de nuevo

				if (this.className.indexOf('actual') == -1)
				{
					imgWrapper.hide();
					imgWrapper.filter(this.hash).fadeIn(500);
					$('ul.listaReciente li a').removeClass('actual');
					$(this).addClass('actual');
				}
				return false;
			});
		});