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:

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:

body { background: white; margin: 0; }
a { outline: none; }
#slide { width: 353px; height: 200px; margin: 0 auto; background: url(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 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(p,c){
	if(activo){
		estado = false;
		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 = "\"\"";
				}
			}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 = "\"\"";
				}
			}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(){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(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

También te recomendamos ver:
Menú desplegable en javascript
Slideshow en javascript

¡Hasta pronto!

Categoría: Tutoriales

Publicado por: negro

Entradas más populares

20 Respuestas para “Carrusel de imágenes en javascript”

  • Hola amigo me gusta mejor esa forma pensaba hacerla en flash,
    pero estaba buscando un tutorial y encontre uno pero no se mucho de los programas. espero solucionar con este.
    Una pregunta puedo crear el background con mas fotos de las que tu colocaste en el ejemplo?
    Gracias de antemano puedes enviarme un correo con la respuesta por favor.

  • Hola estuve revisando tu blog y me parece muy interesante y entretendido, sobre todo que la información es detallada y precisa, espero que sigas posteando más temas para informarnos y comentar.
    Saludos.

  • Déjame felicitarte, que bueno que está tu blog los temas tienen la información exacta que me interesa, sigue posteando más sobre estos temas de color y diseño.
    Saludos

  • Gracias muchachos.

    Efecticamente, se pueden poner más fondos, debes agregar las fotos a la imagen de fondo, asegurándote que tengan 353 de ancho y modificar la variable var total = 4; al número de fotos que quieras.

    Saludos

  • Esta muy bueno pero que pasaria si quiero ponerle link’s a cada imagen como seria el codigo o que le agrego al codigo??

    Saludos

  • Buenas.
    Esta muy bueno tu tutorial, muchisimas gracias, sin embargo tengo una duda, ¿se podria poner mas de 1 imagen a la vez? (en este caso necesito 3), y tambien necesasitaria agregarles link a cada imagen.

    Gracias de antemano.

  • Javier y Edward

    De la forma que está hecho este script, no contempla el hecho de que sean imágenes distintas, ya que es un background. Lo mismo con el tema de los links, si bien se puede colocar un link en todo el bloque, no se permite hacer que cada imágen tenga un link diferente. Para ello habría que pensar otro script un poco más completo.

    Saludos

  • Hola.
    Esta muy bueno el programa pero necesito que las imagenes puedan contener links distintos, ¿es posible que en vez de usar un background pueda usar una imagen y darle los links que necesito?

  • [...] te recomendamos ver: Carrusel de imágenes en javascript Slideshow en [...]

  • [...] te recomendamos ver: Carrusel de imágenes en javascript Menú desplegable en [...]

  • ¿Como puedo agregar eventos a esas imagnes? Osea que al hacer click me lleve a otro apartado del sitio o cosas asi.

  • Fantástico recurso para poder crear un portfolio de calidad. Estoy intentado crear uno mediante este sistema, en cuando lo haya conseguido os comento que tal me ha ido.

  • disculpa soy novato =P me sale un error en esta linea

    document.getElementById(“left”).innerHTML = ““;

  • HOLA .ESTOY CONSTRUYENDO UNA PAGINA Y ME GUSTARIA SABER COMO HAGO QUE VARIAS FOTOS CORRAN SOLAS , SIN TENER QUE USAR EL PUNTERO. ESTOY USANDO DREAMWEAVER PARA LA WEB QUE CONSTRUYO.
    POR FAVOR SI PUEDES ESCRIBIRME AL CORREO TE LO AGRADECERIA.

    GRACIAS….

  • Hola. Muchas gracias. Necesito in favor. Comp havoc q risk safe codified quede exactamente debajo de no menu horizontal perk Que tambien le pueda agregar texto al lado derecho comp descripcion. De manera q todo quede adentro de un Div. Gracias. Cualquier respuesta Asda kit agradecida. Alejandroa35@gmail.com

  • Hola muy interesante el tema. Pero deberías aprovechar todo tu conocimiento, para ofrecerles una oportunidad a internautas como yo que no tienen idea del funcionamiento de dichos codigos. Deberias crear quiza una web que ofrezca el servicio de que permita subir las imagenes, editarlas, y luego de toda la creación proporcionarle el codigo para q ellos lo instalen en su codigo HTML de su web o blog. Asi ganas tú y muchos q estarían agradecidos, incluyendome por esta iniciativa!!….saludos

  • Que buenos post tiene tu sitio…amigo gracias por tus aportes, no nos queda mas que derrochar creatividad!!!

  • gracias por el dato ya guarde la url para cuando lo necesite y tambien encontre este pagina donde tambien hay para descargar carruseles y mas cosas http://cafezzito.com/

  • Hola esta buenísimo este carrusel además de adaptable y sencillo, lo he querido implementar en un sitió que estoy desarrollando pero como mi imagen esta algo grande (6400 x 712 px) se a lenta mucho la animación. Quería poder insertar un archivo html por medio de un iframe en vez de la imagen jpg que se utiliza en este ejemplo pero ya he intentado modificar el código varias veces y no he podido conseguirlo. Crees que haya alguna variable para poder mostrar el html en vez del jpg o como puedo optimizar el jpg, de ante mano saludos y gran ejemplo de carrusel!!

  • Juan, para hacer lo del HTML este código se queda muy corto, no está pensado para eso. En el caso de la imagen de 6400 no habría problema, sólo tienes que ampliar el array con los anchos de cada imagen.

    var ancho = 353; //El ancho de cada sector de la imagen
    var position = new Array(0,ancho*-1,ancho*-2,ancho*-3,ancho*-total); //La cantidad de sectores que quieres

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>