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

¿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;
			});
		});

Fuente: Simple Slideshow with jQuery [icng]

Artículos relacionados:

1. El mundo de la galeria de fotos dice:

   17 abril 2010 a las 6:09 am

   [...] http://www.webmasterio.com/2010/04/03/como-hacer-un-sencillo-carrusel-de-imagenes-con-jquery/ [...]
2. susana dice:

   14 enero 2011 a las 12:45 pm

   Hola! después de probar con varios tutoriales que rondan por internet el tuyo es el único que me ha funcionado. Mi problema es que ahora querría integrar varios carruseles en la misma página, ¿qué parte del código debería cambiar? He probado a duplicar el código del html, cambiar el nombre del id, pero luego en la parte de javascript me pierdo totalmente.
   Hay alguna página que si explica la manera de hacerlo, pero el tutorial que tienen es para un carrusel no infinito, pero yo lo que busco es uno como el tuyo.
   Espero que me puedas ayudar. Mil gracias.