Tutorial: slider de imágenes jQuery

Creo que si existe algo en jQuery que se puede hacer de cientos de formas distintas, eso es sin lugar a duda, un slider de imágenes animado. Existen un sinfín de posibilidades y de plugins disponibles, no obstante y como es realmente imposible probar todos voy a centrarme en uno que me gusta mucho y voy a explicar como hacerlo funcionar.

Antes de empezar, el enlace al ejemplo del slider jQuery y un pequeño video de como se ve el resultado.

¿Que necesitamos?

• Framework jQuery en su ultima versión. Como siempre yo lo cargo desde Google
• Pikachoose que es el plugin que yo utilizo.
• Las imágenes que queremos mostrar en este slider, es importante que todas tengan el mismo tamaño, si bien que tengan distinto tamaño no afecta en nada porque el excedente se oculta el resultado es optimo cuando nosotros mismos cortamos las imágenes, de esa forma mostramos exactamente lo que queremos.
• Unos 20 minutos de tiempo y café o mate a gusto.

Preparando el lienzo

El código html es muy limpio y prolijo, solo requerimos una lista común y un contenedor.

<div class="slider">
<ul id="slider_imagenes">
<li><img src="gato01.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato02.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato03.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato04.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato05.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato06.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato07.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato08.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
</ul>
</div>

El html no tiene ciencia alguna. Pido disculpas por no utilizar los atributos alt ni title, pero para hacer el ejemplo quería dejarlo lo mas limpio posible mostrando solo los elementos imprescindibles para que funcione el slider, luego ustedes pueden agregar estas etiquetas para cumplir con los estándares como corresponde.

Lo único que hay que decir aquí, es que dentro del span vamos a colocar el texto que queremos mostrar en el slider, es decir, lo que se va a mostrar por encima de la banda negra semi transparente.

Configurando el slider

Ya tenemos el cuerpo del html, ahora solo necesitamos configurar los javascript necesarios.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/pikachoose-min.js"></script>

<script language="javascript">
<!--
$(document).ready(
	function (){
		$("#slider_imagenes").PikaChoose({
		auto_play: true,
		thumb_width: 123,
		thumb_height: 94,
		buttons_text: { play: "", stop: "", previous: "Anterior", next: "Proxima" }});
		});
-->
</script>

En las dos primeras lineas de código cargamos las bibliotecas javascript necesarias. Luego vamos a configurar el slider de imágenes.

• $(«#slider_imagenes»).PikaChoose Le decimos al plugin que div utilizar. Esto es lo que tenemos que prestar atención por si vamos a hacer mas de un slider en la misma pagina.
• auto_play El slider comienza a reproducirse ni bien se termina la carga, las opciónes son true o false.
• thumb_width y thumb_height El tamaño de las miniaturas, es un escalado de las imágenes.
• buttons_text Son simplemente las traducciones de los enlaces de texto para desplazarse.

Es muy simple la verdad, ademas si consultan la documentación de Pikachoose van a encontrar más opciones, una que me parece importante comentar es user_thumbs que admite dos valores, true o false, esto habilita o no las miniaturas y permite la inserción de miniaturas propias, es decir, que no se generan de forma automática.

Estilos del slider de imágenes

Los estilos que utilice los van a poder ver directamente desde el código fuente del ejemplo que esta online y a su disposición, les comento que esta dividido en dos grupos, uno que es el definido por nosotros y otro que viene por defecto con el plugin, ese no hace falta ni tocarlo para que se visualice correctamente.

Y eso es todo, hay que jugar un poco con las opciones pero el resultado es muy bueno. Probablemente este slider jQuery de imágenes quede muy bien si lo combinamos con nuestras fotos de Flickr 😀