Vamos a ver cómo crear un carrusel de imágenes utilizando javascript y CSS. Este tipo de aplicación seguramente la hemos visto en destacados de sitios con la temática de portafolios, fotografía, promociones, etc.

Muchos de ellos están realizados utilizando Frameworks, tales como Prototype, Mootools, Spry, etc; los cuales facilitan muchísimo su creación debido al acceso a paquetes de funciones que solucionan los problemas de matemática, física y lógica resumiéndolo al simple pasaje de parámetros.

En esta ocasión no vamos a utilizar la ayuda de ningún framework aunque vamos a ver que es bastante sencillo.
Nuestro carrusel se basa en una única imagen colocada como background, la cual desplazaremos cada vez que hagamos click en las flechas (izquierda y derecha).

En primer lugar vamos a describir los elementos que forman parte de este carrusel:

<div style="margin: 0 auto; width: 353px;"><iframe src ="http://www.abcdisegno.com/archivos/javascript/slide_shows.html" width="353" height="200" frameborder="0" style="border: 0;">
<p>Tu navegador no soporta iframes</p>
</iframe></div>

Tenemos un bloque principal “slide” que contiene dos bloques que son las bandas verticales negras que vemos a los extremos del carrusel. Estos contienen las flechas para hacer mover nuestra gran imagen.

Al comienzo observemos que el div de la banda izquierda aparece vacío, esto es porque en el arranque no necesitamos tener la flecha izquierda; a esta la haremos aparecer con javascript luego que hayamos hecho correr el carrusel.

Ahora veamos los estilos que dan formato a este carrusel:

a { outline: none; }
#slide { width: 353px; height: 200px; margin: 0 auto; background: url(http://www.abcdisegno.com/archivos/javascript/images/background.jpg); }
.band { width: 30px; height: 200px; background: black; text-align: center; }
.band img { position: relative; top: 50%; margin-top: -20px; border: 0; outline: none; }
.left { float: left; }
.right { float: right; }


Se prestamos atención, observaremos que la protagonista de nuestra película es la imagen de fondo que aparece aplicada sobre el bloque “#slide”; por lo tanto, nuestra programación javascript básicamente tendrá que desplazarla horizontalmente cada vez que hagamos click en las flechas de los costados.
Claro está que tenemos que tomar en cuenta varias cosas, como puede ser la posición donde se encuentra actualmente la imagen, si ya ha llegado a alguno de los extremos para ocultar la flecha correspondiente y que no se siga desplazando el carrusel.

Vayamos ahora describir un poco la programación que resuelve esto:

var ancho = 353;
var total = 4;
var position = new Array(0,ancho*-1,ancho*-2,ancho*-3,ancho*-total);
var vel = 0;
var pos = 0;
var estado;
var move;
var bloque;
var posfinal = 0;
var coef;
var dir;
var activo = true;

En la primera parte de la programación definimos algunas variables, tales como el ancho que tendrá cada imagen, el total de imágenes o etapas que tendrá el carrusel y un array con todas las posiciones. Cada posición del array es el incremento en negativo del ancho de cada imagen, esto es debido a que el background tendrá posiciones negativas a la hora de indicarle el desplazamiento con CSS. Luego tenemos la velocidad inicial, posición inicial, la variable que me indica si el desplazamiento supera la mitad de la imagen (esto lo veremos más adelante), el intervalo de tiempo que corrige la posición y genera la animación, la última posición en la que se encuentra la imagen de fondo, el coeficiente que altera la velocidad (esto también lo recibe la función como parámetro), la dirección en la que queremos desplazarlo (esto también lo recibe como parámetro y depende de cuál es la flecha en la que hacemos click) y por último la variable que me habilita desplazar al imagen únicamente cuando ya ha llegado a su posición de reposo.

function dispara(b,p,c){
if(activo){
estado = false;
bloque = b;
coef = c;
dir = p;
if(!dir){
if(posfinal < position.length - 1){
posfinal = posfinal + 1;
move = setInterval(moving,20);
activo = false;
if(posfinal == position.length - 1){
document.getElementById("right").innerHTML = "";
}
if(document.getElementById("left").childNodes.length != 1){
document.getElementById("left").innerHTML = "<a href=\"javascript:dispara('slide',true,5);\"><img src=\"http://www.abcdisegno.com/archivos/javascript/images/arrow_left.gif\" alt=\"\" /></a>";
}
}else{
activo = true;
}
}else{
if(posfinal > 0){
posfinal = posfinal - 1;
move = setInterval(moving,20);
activo = false;
if(posfinal == 0){ document.getElementById("left").innerHTML = "";
}
if(document.getElementById("right").childNodes.length != 1){
document.getElementById("right").innerHTML = "<a href=\"javascript:dispara('slide',false,5);\"><img src=\"http://www.abcdisegno.com/archivos/javascript/images/arrow_right.gif\" alt=\"\" /></a>";
}
}else{
activo = true;
}
}
}
}

Ahora vamos a observar la función que se ejecuta cuando hacemos click en las flechas. Esta función en primer lugar iguala los valores recibidos como parámetros a las variables antes definidas luego se fija en que flecha fue que se hizo click (dir), más adelante si aún no se a llegado a la última posición del array o del carrusel y se ejecuta el intervalo de tiempo que se encarga de desplazar la imagen de fondo (esta función la vemos más adelante).

El condicional siguiente chequea si se hizo click en una flecha para llegar a la última posición del carrusel, de esta manera hacer que la desaparezca, ya que el carrusel llego a su tope y sólo se puede hacer click en la flecha contraria.

El otro condicional se fija si el bloque que contiene las flechas está vacío para colocar dicha flecha y permitir  desplazar el carrusel hacia el otro lado.

El siguiente fragmento de código hace exactamente lo mismo, pero aplicable para cuando se hace click con la flecha izquierda. La diferencia aparece en el condicional de las posiciones del array, la posición extrema para este caso será el 0 del array, o sea la primera foto, aquí dejará de funcionar y desaparecerá la flecha izquierda.

Ahora veamos la función que se encarga de ocasionar el movimiento en la imagen de fondo.

function moving(){
if(!dir){
if(pos > position[posfinal] + (ancho/2)){
vel-= coef;
}else{
if(!estado){
pos = position[posfinal] + (ancho/2);
vel-= coef;
}
vel+= coef;
estado = true;
}
pos+= vel;
if(pos <= position[posfinal]){
pos = position[posfinal];
clearInterval(move);
vel = 0;
activo = true;
}
}else{
if(pos <= position[posfinal] - (ancho/2)){
vel+= coef;
}else{
if(!estado){
pos = position[posfinal] - (ancho/2);
vel+= coef;
}
vel-= coef;
estado = true;
}
pos+= vel;
if(pos >= position[posfinal]){
pos = position[posfinal];
clearInterval(move);
vel = 0;
activo = true;
}
}
document.getElementById(’slide’).style.background = ‘url(http://www.abcdisegno.com/archivos/javascript/images/background.jpg) no-repeat ‘+ pos +’px’;
}

Acá también tenemos un condicional que chequea la dirección en la que tendrá que desplazarse la imagen.

Antes de seguir vamos a explicar un poquito la lógica de como se desplaza la imagen. Cada vez que nosotros hacemos click en una flecha le estamos diciendo que la imagen se desplace un lugar en el array, pero que lo haga por medio de una animación, esta animación se logra corrigiendo la posición de la imagen con CSS. ¿Pero qué valores tengo que asignar para qué la animación presente las características qué quiero?  Si prestamos atención, la imagen se desplaza con un movimiento uniformemente acelerado hasta la mitad de la otra imagen y luego el movimiento es uniformemente desacelerado hasta que se detiene.

Para lograr este efecto lo que se hace es incrementar la velocidad con el coeficiente que pase como parámetro. ¿Por qué no incremento la velocidad? Por que sino el moviento sería rectilíneo y uniforme pero no acelerado y yo necesito alterar la velocidad que le aplico.

Por lo tanto la velocidad aumenta hasta la mitad del desplazamiento de una imagen a otra y luego disminuye hasta detenerse. Esto es lo que se observa en la programación. Van a ver que según la posición de la imagen, incremento o decremento el coeficiente en la velocidad.

La variable “estado” que aparece, únicamente me sirve para corregir la posición cuando llego a la mitad del desplazamiento y de esta manera evitar los saltos en la animación. Siempre es una buena práctica corregir la posición para que no se arrastren diferencias.

Cuando la posición de la imagen haya llegado a su correspondiente posición en el array, me encargo de igualar a 0 la velocidad, dejar el antecedente de cuál es la posición actual de la imagen, borrar el intervalo de tiempo para evitar que se ejecute la función nuevamente y activar la variable “activo” para que las flechas estén prontas de recibir un nuevo desplazamiento.

Por último aparece la línea de código que se encarga de modificar la posición de la imagen dependiendo siempre de la posición que le asigne, esta última es determinada por el incremento de la velocidad, una velocidad que también se vio incrementada por el coeficiente.

Es importante aclarar que el coeficiente que pase como parámetro en las flechas, será el que me determine la velocidad con la cual se desplazará el carrusel.

Aquí puedes descargar los archivos

¡Hasta pronto!