Carrusel rotativo vertical de imágenes

por

Hoy os traigo un carrusel de imágenes que va moviendolas automáticamente de abajo a arriba. Está basado en jquery y es un código totalmente propio. El carrusel va pasando las imágenes de abajo a arriba de forma automática y rotativa hasta que pasamos el ratón por encima, momento en el cual el carrusel se detiene hasta que volvamos a sacar el ratón de encima. La imágenes son clicables para poder visualizarlas de manera individual.

Su implantacion es sumamente sencilla, tan simple como el ejemplo siguiente:


<div class="carrusel">
<ul class="bloque-imagenes">
<li><a href="images/foto1.jpg" alt=""><img src="images/foto1.jpg" alt=""/></a>
</li>
<li><a href="images/foto2.jpg" alt=""><img src="images/foto2.jpg" alt=""/></a>
</li>
<li><a href="images/foto3.jpg" alt=""><img src="images/foto3.jpg" alt=""/></a>
</li>
<li><a href="images/foto4.jpg" alt=""><img src="images/foto4.jpg" alt=""/></a>
</li>
<li><a href="images/foto5.jpg" alt=""><img src="images/foto5.jpg" alt=""/></a>
</li>
<li><a href="images/foto6.jpg" alt=""><img src="images/foto6.jpg" alt=""/></a>
</li>
					
</ul>
</div>

Como podeis ver es un simple bloque que engloba a un listado con las imágenes de nuestro carrusel y unos class específicos.

A continuación le damos un poco de estilo con CSS para que todo se vea correctamente:


.carrusel{
height:350px;
overflow:hidden;
width:120px;
}

.bloque-imagenes{
margin:0 0 0 12px;
padding:0;
}

.bloque-imagenes li{
list-style:none;
margin:0;
padding:0;
margin-bottom:12px;
}

.bloque-imagenes li img{
height:73px;
width:109px;
border:0;
}

.bloque-imagenes a:hover img{
border:1px #fff solid;
}

Y por último añadimos el código Jquery que será el motor de nuestro carrusel rotativo.


$(document).ready(

function() {

var numeroImagenes;

var contenidoInicial=$('.bloque-imagenes').html();

var margenTop;

function carrusel(){

margenTop=$('.bloque-imagenes').css('margin-top');


margenTop=margenTop.split('p');
margenTop[0]=margenTop[0] - 1;


if((($('.bloque-imagenes').children().size() - 4) * 73) < 
Math.abs(margenTop[0])){

$('.bloque-imagenes').append(contenidoInicial);

};

$('.bloque-imagenes').css('margin-top',margenTop[0] +'px');

}


var parar=setInterval(function mover() {carrusel();},100);


$('.bloque-imagenes').mouseover(function(){
	clearInterval(parar);

});

$('.bloque-imagenes').mouseout(function(){
	parar=setInterval(function mover() {carrusel();},100);
});

});

Como podemos ver en este código Jquery podemos modificar la velocidad a la que se mueve el carrusel, tan solo bastaría con tocar el número del setInterval, cuanto más grande mas lento irá y cuando más pequeño más rápido.

Aquí podeis ver un ejemplo del resultado final.

Podeis bajar el ejemplo del siguiente enlace

Ya que una de nuestras visitantes nos ha preguntado como podemos hacer este carrusel de forma horizontal, os dejo también la versión en horizontal.

Cualquier duda que tengais no dudeis en escribirme.

COMENTARIOS

02-10-2016 02:01:32
me gusto mucho el ejemplo
09-11-2015 03:34:53
Gracias; estaba buscando esto.
25-10-2015 21:30:29
En el Jquery del ejemplo que me he bajado no localizo las líneas de setInterval... Dado que he incorporado 15 elementos al carrusel me interesaría darle más brío, ya que va muy lento. Por lo demás genial!
02-12-2014 23:11:42
hola si quisiera poner el carrusel dentro de una division que tengo en mi sitio web como lo hago porque yo meti pero no me corre
26-09-2014 02:12:19
Sergio muchísimas gracias ya lo logre, también poniendo el segundo carrusel, muchas muchas gracias... Saludos...
26-09-2014 01:22:42
Muchas gracias Sergio por responderme, una pregunta más quiero poner tres carruseles en mi pagina ya hice el primero, pero tengo entendido que para poner dos o mas tendríamos que modificar las siguientes variables: numeroImagenes, contenidoInicial, bloque-imagenes, margenTop, carrusel y parar. Ya los he modificado poniéndoles un 2 a cada uno. Pero solo se quedan paradas las imágenes, me puedes ayudar por favor, de antemano gracias...
25-09-2014 22:07:11
Hola @Angel, si te bajas el carrusel verás que es un carrusel infinito. Puedes probarlo online en el propio enlace del artículo. Por lo tanto lo que me pides es lo que ya da el carrusel ;) Un saludo,
25-09-2014 04:18:50
Hola Sergio antes que nada felicidades por tu espacio y muchas gracias por el aporte me ayudado muchísimo, pero una pregunta que puedo hacer para que cuando se muestre la ultima imagen de mi carrusel este vuelva a comenzar otra vez mostrando la primera imagen ya que cada vez que se reinicia el carrusel este le resta una imagen hasta que no muestra nada, ¿ Como le hago para que este se repita una y otra vez? ayudare por favor. De antemano muchas gracias.... Saludos...
10-08-2013 11:53:37
Hola Ivan, jQuery es compatible con todos los principales navegadores actuales y sus versiones más recientes(Firefox, Chrome, Safari, Opera y Internet Explorer). En el caso de IE sólo debes preocuparte de la versión 7 en adelante. jQuery dejo de dar soporte a IE 7 y 8 a partir de la versión 1.9 pero esto no quiere decir que no funcionen para ellas, simplemente que pueden terner bugs. Yo trabajo activamente con jQuery y te puedo asegurar que es 99% compatible con IE 7 y 8 en su versión 1.8. Hay alguna funciones que no funcionan muy bien en estos navegadores como puede children() o contains() pero hay alternativas a ellas. En el caso de Javascript puro entramos en un terreno más complicado ya que ahí sí que te puedes encontrar con verdaderos quebraderos de cabeza. Hay muchísimos código javascript que funcionan en todos los navegadores excepto IE 7 y 8 y para hacerlos funcionar es necesario utilizar alternativas exclusivas que te ofrecen. Son casos puntuales de incompatibilidades por eso lo m;ás recomendable es usar jQuery, porque te aseguras la compatibilidad casi completa. El carrusel que te presento aquí funciona en cualquier navegador, incluídos IE7 y 8.

Por último decirte que en el caso de IE7, cada vez está más en desuso y el porcentaje actual de usuarios que lo usan es ínfimo por lo que ya muchas empresas y páginas web empiezan a desestimarlo y no destinar esfuerzos a maquetar y programar para ese navegador. Espero que te sirva la información y si tienes alguna duda más no dudes en seguir comentando.
10-08-2013 10:24:28
Hola que tal muy buen material, aunque he estado probando cientos y cientos de codigos Javascript o JQuery y ninguno me funciona mas que en versiones antiguas de IE8 para abajo, pero chrme, firefox o IE9 ningun codigo me sirve, por que
01-08-2013 20:49:30
Muchas gracias @cristian. El carrusel no está preparado para admitir flechas directamente. Sería necesario que modificases el código. Asi de primeras se me ocurre una solución fácil: si te fijas, la función carrusel() es la que hace los desplazamientos y el setInterval el que llama a la funcion cada X milisegundos. Lo que puedes hacer es quitar el setInterval para que no se ejecute en automático y hacer que cada vez que cliques sobre una de las flechas se ejecute N veces la función carrusel(es una solución rápida aunque no es la óptima).
31-07-2013 23:36:14
Hola super vacan ese carrusel, quiero añadirle flechas para ir moviendo el carrusel arriba o abajo, como lo podria hacer, saludos.
13-07-2013 01:16:32
Hola @sebastian, lo primero gracias por tu comentario :) Por otro lado, para conseguir lo que pides, actualmente el carrusel vertical sólo se mueve en una dirección. Si quisieras que se moviese en la otra dirección habría que modificar el margenTop para que sube px en vez de restar. Además habría que ir añadiendo elementos al principio de la lista y reducir el margenTop en un espacio igual al alto del elemento y cuando el margenTop sea 0 es el momento de añadir un nuevo elemento. Por último, la posicion inicial del carrusel debería establecerlo mediante el margin-top a una posición igual a la altura total del carrusel de forma negativa, de esta forma el carrusel empezaría en el último elemento e iria subiendo y cuando su margenTop fuese 0 sería el momento de añadir un nuevo elemento. Como ves no es algo trivial asi que espero haberme explicado :).
12-07-2013 22:39:32
hola,muy bueno el carrusel, quisiera saber q parte del codigo debo modificar para que el carrusel vertical se mueva para ambas direcciones, gracias
31-05-2013 19:55:26
Muy bueno, 4 horas buscando y al fin encuentro uno sencillo.
28-05-2013 22:51:34
Hola @Sara, el carrusel originalmente no tiene controles como los que solicitas pero se podrían crear perfectamente. Sería tan simple como jugar con el margenTop del carrusel(que es el encargado de moverlo) y luego con las opciones de setInterval y clearInternval que puedes ver en el código.
28-05-2013 17:26:36
Hola quisiera agregarle botones o controles para subir y bajar imagenes para el carrousel vertical como se hace?
22-05-2013 00:31:47
Claro, Sergio. Mi correo es cristo.victorioso@gmail.com Me gustaría saber qué estoy haciendo mal. Aquí te mando los archivos modificados, que no me funcionan http://www.mediafire.com/?36rmovrzl2mepp8 ¡Gracias!
20-05-2013 22:57:51
Hola de nuevo Cristianita. He probado a añadir dos carruseles tal y como te indiqué y funciona perfectamente. Si quieres pasame tu email y te mando el ejemplo para que veas como hacerlo.
19-05-2013 03:44:56
Disculpa, se me fue la luz, y no supe si el mensaje que escribí se envió o no... Te decía que sí, Sergio; me fui yendo renglón por renglón en los dos cógiso. Donde encontraba bloque-imagenes, le agregaba el 2 (bloque-imagenes2), y donde encontré carrusel, le agregué el 2 también (carrusel2). Pero en cuanto le doy a "Guardar los cambios", y abro la visualización, las imágenes aparecen estáticas.
18-05-2013 23:55:24
Sí, Sergio, me fui línea por línea en los dos códigos, buscando, y donde dijera .bloque-imagenes, le agregaba el 2, y donde encontraba "carrusel", también agregando el 2. Pero la tira de imágenes aparece estática después de guardar cada código.
18-05-2013 12:06:55
¿Cambiaste también las variables numeroImagenes, margenTop,contenidoInicial y parar?
16-05-2013 21:07:35
El problema es que cuando cambio todo (así como vi que le respondiste a @Jahlopez), le pongo carrusel2, y así... Deja de funcionarme, se quedan las imágenes estáticas. Ya lo he hecho varias veces, y con el mismo resultado. Por ejemplo, aquí le pongo así ".bloque-imagenes2 li img", o sea, le agrego el 2 a todo: a carrusel, y a .bloque-imagenes, tanto en el script (en donde sea que veo carrusel y bloque-imagenes), como al CSS. Y las imágenes se quedan estáticas. Por consiguiente, creo que no soy capaz de editar los códigos de manera de poder usar los dos en el mismo foro :(
16-05-2013 20:52:54
Debes cambiar tanto .bloque-imagenes como el nombre de la función y los nombres de variables. Si no lo haces se machacarán unos a otros.
15-05-2013 22:00:02
Ya hice lo que me sugeriste, y funciona perfecto! ¡Gracias! Lo último, para ya poder poner el carrusel horizontal en mi foro, es lo siguiente: tengo puesto ya el carrusel vertical, y veo que las "clases" en el CSS son las mismas. Tengo que ponerlas diferentes, para que no se confundan con el otro carrusel vertical. Yo puedo cambiarlas en el CSS, pero ¿cómo las cambio en el javaScript? Pudiera pensar que sólo cambiando todos los "carrusel" que encuentre por "carruselhor", por ejemplo. Pero quiero estar segura :) Disculpa tantas molestias :-/
14-05-2013 23:20:15
Ok,¡gracias, Sergio! así lo haré. Pero antes, ¿podrías aclararme una duda? Veo que en el carrusel vertical no importó la cantidad de imágenes que pusiera, igual se pasan todas juntas, una detrás de otra sin espacios. Porque en este carrusel vertical puse solamente tres imágenes, y funciona a la perfección. ¿Podrías decirme por qué en este caso del carrusel horizontal sí importa la cantidad de imágenes?
14-05-2013 22:23:46
Hola @Cristinanita, me alegro que te funcionase. Para arreglar lo que me pides del horizontal creo que debes de ampliar el ancho de .bloque-imagenes al ancho total de las N fotos que tengas. De primeras está a 560px y debemos ponerlo a la suma total de los anchos de las imágenes originales. Por ejemplo si tienes 6 fotos de 200px de ancho pues le pones 1200px. Cambia el alto y ancho de .bloque-imagenes li img a 200x200 y el alto de .carrusel a 200 Yo lo he probado y ha funcionado cambiándole eso. Prueba y me dices.
13-05-2013 23:44:24
Hola, Sergio :D Gracias por responderme tan rápido. Hice lo que me indicaste, y el carrusel quedó perfecto. Te pondría el link de mi foro, si no es porque no estoy segura de que sea spam jajajaja Pero ahora también quiero implementar el carrusel horizontal. Y lo mismo, cuando le hago modificaciones, deja de ser continuo. Las imágenes que quiero que aparezcan son de 200x200 px. Le he modificado al código de 73 a 200, y también al CSS, pero como te digo, dejó de funcionar. ¿Me podrías decir la modificación que debo hacerle para unas imágenes de esas dimensiones?
13-05-2013 22:50:02
Hola @Cristianita. Muchas gracias por tu comentario. Tu problema puede venir por la altura de las imágenes.

Prueba a cambiar el 73 del código por la altura de tus imágenes (23 en tu caso).

Me cuentas cuando lo pruebes a ver que tal te fue :)
12-05-2013 22:55:07
Antes que nada, mis felicitaciones por el aporte, y también mi agradecimiento. Le cambié el CSS para que mis imágenes se redimensionaran a 180x23px, y tal vez eso afectó el funcionamiento del carrusel. También le cambié la velocidad de 100 por 50. El asunto es que ahora ya no se ve en forma continua, sino que se corta. Aquí una imagen para que veas a lo que me refiero: http://i981.photobucket.com/albums/ae291/Cristianita/no-carga-bien-la-marquesina_zps22bcec42.gif Espero que puedas visualizarlo, y también ver si puedes ayudarme, porque está genial, ¡me encantó!
04-04-2013 22:40:47
Hola Karen, no entiendo muy bien tu pregunta, ¿seguro que es sobre este artículo?
02-04-2013 17:34:05
Hola muy util el ejemplo, pero si quiero hacer algo como 00:00:00 para la hora es mejor poner 3 spinner o se puede hacer en 1, te agradeceria una respuesta, karenbety53@gmail.com =)
26-03-2013 21:21:25
@rash, por supuesto que es gratis :)
26-03-2013 16:50:16
excelente jquery!!! es gratis?
24-03-2013 23:52:30
Excelente!!! Un millon de gracias por el aporte
22-03-2013 18:33:35
Hola Janna, lo siento pero no está pensado para añadir unas flechas que lo controlen. Es automático.
21-03-2013 14:28:18
Hola! Gracias por este valioso recurso, quería preguntarte si hay forma de colocar unas flechitas para controlar la navegación y cómo sería el codigo en ese caso?
02-03-2013 11:39:15
@Jahlopez lo primero muchas gracias por tu comentario :), en cuanto a lo de duplicar el carrusel, la verdad es que para hacerlo debería duplicar el código porque no lo creé en forma de plugin. Para duplicarlo tienes que duplicar la funcion carrusel(), por ejemplo a carrusel2(). Cambias el class .bloque-imagenes a .bloque-imagenes2 por ejemplo y luego con las variables numeroImagenes,margenTop y contenidoInicial haces lo mismo. Siento que la solución no sea más sencilla. La verdad es que en vista de que esta funcionando bastante bien estoy planteándome la posibilidad de convertirlo en plugin para facilitar su uso múltiple y evitaros tener que andar modificando el código. En un periodo corto de tiempo lo haré :)
02-03-2013 04:28:06
Excelente aporte compañero, tengo relativamente poca experiencia pero me parece bastante sencillo solo tengo una duda y seria como podría duplicarlo para que el mismo se muestre tanto a la izquierda como a la derecha de la pagina, o simplemente configurarlo para que se mostrase a la derecha....
01-03-2013 16:00:10
Excelente aporte, muy bien explicado, GRACIAS MIL
19-12-2012 20:40:39
@Juan, lo que pides con el código actual no es algo trivial ya que haría falta modificar la función carrusel() de tal forma que cuando el marginTop del UL sea multiplo de la altura haga un clearInterval y X segundos después haga un setInterval para vovler a arrancar el carrusel.
19-12-2012 07:43:30
Hola me parece genial este carrusel, de hecho ya lo pude aplicar con otras imágenes pero quisiera saber como puedo lograr que pare algunos segundos durante la animación, es decir, mi primera imagen sube y tengo un contenedor que mide el mismo alto que todas mis imágenes, entonces cuando va subiendo y muestra la segunda imagen quiero que se quede estático unos segundos y a continuación siga subiendo... esto quisiera aplicarlo con todas las imágenes, podría ayudarme a resolverlo? de ante mano gracias y muy buen ejercicio.
14-10-2012 23:14:26
Probablemente sea porque has introducido imágenes con tamaños excesivos y no sirven. Bajate el ejemplo directamente desde más arriba y prueba a sustituir las imagenes que trae por las tuyas pero con los tamaños adecuados. Debería de funcionarte perfectamente.
09-10-2012 04:05:04
Hola el corrusel se empalma una foto con otra y no vuelve a aparecer... cómo le puedo hacer?
01-10-2012 22:50:11
El carrusel esta preparado para que se mueva solo de derecha a izquierda. Para invertirlo habría que modificar el código.
01-10-2012 15:05:36
Instalé el carrusel horizontal y funciona perfecto. Pero tengo una pregunta: El carrusel se mueve de derecha a izquierda. Hay forma de decirle que lo haga de izquierda a derecha?
29-08-2012 22:27:57
amigo el horizontal le he puesto 36 imagenes y en IE 8, para u me cierra el IE lo mismo pasa con el crome comienza bien pero para y no continua ejecutando el efecto. al parecer es que la funcion esta muy cruda para el motor de jqury no tendrias una funcion mas optimisada. Por favor si la tienes enviamela a este email. dreamsweb86@gmail.com
07-07-2012 14:25:32
@Salvador sólo tienes que fijarte en los setInterval. ERso numero que va dentor de la funcion(el 100) marca la velocidad con la que se mueve. Sólo tienes que variarlo en ambas líneas y listo. Si lo reduces irá más rápido y si lo aumentas más despacio.
07-07-2012 00:15:10
Ola disculpa muy bueno el código pero como hago ke valla un poco mas rápido ???? podrías poner el código gracias !!!
27-02-2012 06:25:00
ya conseguí pillarlo gracias por el código :D
27-02-2012 06:09:45
hola quiero poner los dos carrusel en una sola pagina pero no puedo ya que tienen el mismo nombre me podrías decir que debo cambiar para que me funcione :S
01-12-2011 18:11:46
Muchas gracias por contestar!!!
01-12-2011 17:52:31
No, descargando el archivo lo tendrías todo y te debería de funcionar correctamente, yo lo he hecho y me va perfectamente.
01-12-2011 16:50:21
Oye no falta otro .js es q no me jala el efecto
26-11-2011 00:56:11
Es complicado decirte como modificarlo ya que habría que cambiar varias cosas. Intentaré hacer las versiones que me pides en cuanto tenga algo de tiempo. Gracias por tu comenario.
25-11-2011 18:56:17
Hola, muy bueno el carrusel, como o que tengo q modificar para que pase de izq a der???? o de abajo a arriba......
15-11-2011 01:21:01
Me gustaria saber como lo puedo hacer horizontal aid_li22@hotmail.com Gracias
30-10-2011 00:49:17
Gracias, un material muy interesante... :) lo probare... Saludos.
14-09-2011 19:58:23
He editado el artículo para dejar el enlace para que puedas descargarte el ejemplo al final.
14-09-2011 18:12:15
xq gusta el carrusel pero tengo duda sobre ej js, le agradesco si me pasan los archivos al correo jonathan.ely@hotmail.com

DEJA TU COMENTARIO