Carrousel (jCarrousel) de Imagenes con jQuery
Desde el sitio de Sorgalla, me encontre como hacer una carrousel de imagenes interesante y simple a la vez, con jQuery y css.
lo primero que tenemos que hacer es incluir entre las etiquetas <head> </head> las librerías y el estilo para el carrousel de imagenes.
Librerías Js:
<script type="text/javascript" src="script/jquery-1.2.3.pack.js"></script> <script type="text/javascript" src="script/jquery.jcarousel.pack.js">&</script>
Hojas de Estilos:
<link rel="stylesheet" type="text/css" href="script/jquery.jcarousel.css" /> <link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
Lo siguiente es introducir el escript necesario para el plugin de jQuery interprete lo que queremos hacer:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
Para finalizar armamos con html la lista de imagenes que contendra nuestro carrousel de imagenes de esta manera:
<ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="motos/moto1.jpg" width="75" height="75" alt="" /></li> <li><img src="motos/moto2.jpg" width="75" height="75" alt="" /></li> <li><img src="motos/moto3.jpg" width="75" height="75" alt="" /></li> <li><img src="motos/moto4.jpg" width="75" height="75" alt="" /></li> <li><img src="motos/moto5.jpg" width="75" height="75" alt="" /></li> <li><img src="motos/moto6.jpg" width="75" height="75" alt="" /></li> <li><img src="motos/moto7.jpg" width="75" height="75" alt="" /></li> <li><img src="motos/moto8.jpg" width="75" height="75" alt="" /></li> <li><img src="motos/moto9.jpg" width="75" height="75" alt="" /></li> <li><img src="motos/moto10.jpg" width="75" height="75" alt="" /></li> </ul>
Les dejo la demo y codigo para descargar. No omitan sus comentarios, sugerencia, criticas “constructivas”.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
Hola si alguien sabe como puedo hacer exactamente lo mismo pero de manera vertical 
me podría mandar un mensaje :(:(!!!!!!! saludos y buen tuto!
Utilice este carrousel con Thinckbox, para que abra las imagenes por ajax. El problema que tengo es que al cargar las imagenes iniciales por primera vez en un navegador se me ven algunas abajo, probe con firebug y veo que el ancho del UL generado es menor que lo que deberia.
Al Actualizar la pagina se ve correctamente! y todas las imagenes en su lugar.
a Alguien le paso?
saludos y gracias
Hola, esta muy bien hecho, yo soy un principiante y me gustaria saber como le agrego un caption a los thumbnails…
muchas gracias!
Hola, me gustaría saber cómo hacer para que en vez de tener que necesariamente hacer click, las imágenes se vayan moviendo al colocar el mouse encima de la flecha. Saludos.
Vengo navegando como de “ochorrocientas” páginas y me sigo encontrando con el mismo fabuloso sistema, pero estoy sin poder hacerlo funcionar con mi galería de fotos que opera con base de datos. Necesito el comportamiento de mouseover para que, al pasar el puntero del mouse sobre las miniaturas, se despliegue un mensaje de texto más abajo, que se refiere al pie de lectura de la foto correspondiente y que también está almacenado en la base de datos MySQL. Y, que esté cada miniatura linkeada para que al pinchar cada una (leyendo el id correspondiente de la BdD), se vaya a una página donde se despliegue la foto grande con otros detalles, lo cual no es problema.
Si lo que me tiene mal es que no logro hacer el mouseover para que se despliegue el pie de foto y que las miniaturas se ordenen secuencialmente en el rectángulo de las miniaturas.
¿Sugerencias?
man nose si habras probado el jcarrousel
con la propiedad de
auto: 2,
wrap: circular
si lo hace lo malo es que clona los atributos y lo manda al ultimo con otro index,pero eso ahce que sobrecarge la pagina
no se si habras visto otra manera sin que clone los li gracias
estare a la espera de tu respuesta
Hola el Carrousel funciona perfecto en FireFOX, pero en Internet explorer no me termina de pintar el carrousel solo veo las imagenes apiladas verticalmente, esto me sucedió cuando puse un Menu de JQuery en mi diseño, ayuda por favor, que puede ser?
Mil gracias por su atencion,
Angel
Está muy bueno, pero como hago para que al dar click en la miniatura, vaya para una determinada URL?
En lugar de abrir una foto en tamaño mayor, ir para un site.
Si sabes, te agradezco la información.
Gracias