jCarousel Lite
jCarousel Lite es un plugin para jQuery que te permite añadir un carrusel lleno de imágenes y de contenido HTML fácilmente. En pocas palabras, se puede navegar por las imágenes y/o contenido HTML en un widget al estilo carrusel. El peso súper ligero, a unos 2 KB de tamaño, es muy flexible y personalizable para adaptarse a la mayoría de nuestras necesidades.
Con jCarosusel Lite puedes implementar un carousel horizontal, vertical, controlando la velocidad, mini galería de imágenes con carousel, auto scroll, etc.
Para utilizarlo será necesario incluir la librería jQuery, el plugin y su llamada, como por ejemplo:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
<script type="text/javascript">
$(function() {
$("#content .jcarousellite .carousel").jCarouselLite({
btnNext: "#content .jcarousellite .next",
btnPrev: "#content .jcarousellite .prev",
scroll: 3
});
});
</script>
En este caso estamos declarando un elemento carousel con botones derecha e izquierda y con scroll de 3 elementos.
El contenido a añadir en nuestro <body> con el carousel en formato HTML es el siguiente:
<div class="jcarousellite"> <button class="prev"></button> <div class="carousel"> <ul> <li><img src="images/1.jpg" alt="" width="190" height="160" /></li> <li><img src="images/2.jpg" alt="" width="190" height="160" /></li> <li><img src="images/3.jpg" alt="" width="190" height="160" /></li> <li><img src="images/4.jpg" alt="" width="190" height="160" /></li> <li><img src="images/5.jpg" alt="" width="190" height="160" /></li> <li><img src="images/6.jpg" alt="" width="190" height="160" /></li> <li><img src="images/7.jpg" alt="" width="190" height="160" /></li> <li><img src="images/8.jpg" alt="" width="190" height="160" /></li> <li><img src="images/9.jpg" alt="" width="190" height="160" /></li> </ul> </div> <button class="next"></button> </div>
La personalización es adaptable a nuestra necesidades. En el ejemplo en funcionamiento le hemos dado el siguiente aspecto:
Ver más información
Ver todas las opciones disponibles
Autor
¿Buscas trabajo de programador?
2 respuestas a “jCarousel Lite”
Deja una respuesta
12 artículos que te podrían interesar
Ver más sobre
Hola, buen tutorial. SIn embargo me queda una duda. Como puedo dejar que que solo se muestre un elemento, no tres.
Hola, me parece que tan solo debes añadir un parámetro más a la llamada al plugin:
visible: 1,
Saludos