jCarousel Lite es una complemento para jQuery que nos ayuda a generar un deslizador de contenidos HTML ó como se le conoce también un carrusel, por el bucle que realiza.
Hace poco, implementando para lo que será el nuevo tema del blog, me di cuenta que jCarousel Lite es mas fácil de configura que el Easy News, del cual habiamos hablado anteriormente, sin pasos tediosos incluso valida el código HTML sin problema alguno.
Vamos a ver la forma practica y sencilla de sacarle provecho a esta herramienta para nuestro blog ó proyectos web para mostrar cualquier contenido HTML.
Paso 1
Descargar ó referenciar tanto el jQuery como el complemento jCarousel Lite ¿fácil no?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.min.js"></script>
Paso 2
Ahora luego nada más, definir algunos estilos para los elementos HTML que vamos a usar.
<style>
#contenedor{
border:1px solid red;
width:600px;
}
.preview{
height:200px;
border:1px solid blue;
}
</style>
Paso 3
Luego de la etiqueta <body> debemos configurar jCarousel Lite para especificar por ejemplo que elemento del DOM va usar para mostrar el carrusel, velocidad, etc.
<script type="text/javascript">
jQuery(function() {
jQuery(".galeria").jCarouselLite({
visible: 1,
speed: 2000,
auto: 2000,
});
});
</script>
Paso 4
El HTML tendrá la siguiente estructura:
<div id="contenedor">
<div class="galeria">
<ul>
<li>
<div class="preview">
<--contenido a mostrar, fragmento de un post -->
</div>
</li>
<li>
<div class="preview">
<--contenido a mostrar, fragmento de un post -->
</div>
</li>
<!-- n elementos <li /> -->
</ul>
</div>
</div>
Para nuestro ejemplo lo vamos a llenar de este contenido de ejemplo:
<div id="contenedor"> <div class="galeria"> <ul> <li> <div class="preview"> <h2><a href="https://www.ribosomatic.com/articulos/detect-mobile-browser-detectar-navegador-de-telefono-movil/">Detect Mobile Browser, detectar navegador de teléfono móvil</a></h2> <p>Muchos me han preguntado por correo una forma de direccionar de una pagina web estandar a una versión para movil cuando se accede desde uno de estos dispositivos. Esto me hace recordar una herramienta web muy práctica que use, se trata de Detect Mobile Browser. Así es, esta herramienta no es nueva, ya tiene su tiempito en la web y...</p> </div> </li> <li> <div class="preview"> <h2><a href="https://www.ribosomatic.com/articulos/carteles-de-anuncios-creativos/">Carteles de anuncios muy creativos</a></h2> <p>En muchas de las veces los carteles de anuncios son una molestia en cada edificio alto que encontremos a nuestro paso, carteles con un diseño y conceptos pobres. Sin embargo la recopilación que hace Designer Daily son realmente divertidos, creativos y destacados. Vease algunos:Adidas Strong tape billboard Panasonic hair nose trimmer Law and order McDonalds Lego...</p> </div> </li> <li> <div class="preview"> <h2><a href="https://www.ribosomatic.com/articulos/pong-game-adobe-flash-vs-html-5/">Pong game: Adobe Flash vs HTML 5</a></h2> <p>Code Computerlove ha desarrollado el famoso juego Pong con HTML 5, el cual se puede jugar con el teclado, demostrando así que este lenguaje puede competir en el desarrollo de animaciones, incluso complejas, como Adobe Flash. Curiosamente el área juego del Pong está dividido en dos partes correspondiente a cada tecnología, izquierda Flash y derecha HTML, y como éstas interactuán...</p> </div> </li> <li> <div class="preview"> <h2><a href="https://www.ribosomatic.com/articulos/recurso-1000-iconos-de-alta-calidad/">Recurso: 1000 iconos de alta calidad</a></h2> <p>Uno de los recursos a tener en cuenta todo desarrollador ó webmaster para sus proyectos en web son: los iconos. De esto no hay duda. Nada mas en nosotros cuando navegamos por la web, fijamos nuestra vista en las imagenes mas que en el texto. En todas las páginas web si algun texto describe, algun producto por ejemplo, seguramente encontrará...</p> </div> </li> </ul> </div> </div>
Como se puede ver es muy sencillo configurar este carrusel. Espero les sea útil la información.
Enlaces: Sitio web | Demo | Documentación
muy bueno, para firefox, lo q es internet explore y chrome no funciona viejo!!!!
Muy buen tutorial, gracias. Funciona perfecto en todo los Navegadores inclusive ie, menos la desastrosa version 5.5
buena info amigo,
quisiera utilizar esto en una funcion para crear un slide.
Saludos