Crea un carrusel de contenido html con jCarousel Lite. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Lenguajes de script Javascript

¡votar!

Crea un carrusel de contenido html con jCarousel Lite

jCarousel Lite es un plugin desarrollado para jQuery que nos permitirá crear un deslizador de contenido HTML en nuestra aplicación, de una forma muy sencilla y con muy pocos pasos.

Vamos a ver la forma en la que podemos hacer uso de este plugin en nuestras aplicaciones.

Lo primero que debemos de hacer es descargarnos o referenciar las librerías que necesitaremos, en nuestro caso jQuery y jCarousel Lite.

<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>

A continuación, definimos algunos estilos para los elementos HTML que vamos a utilizar.

#contenedor{
border:1px solid red;
width:600px;
}
.preview{
height:200px;
border:1px solid blue;
}

El siguiente paso será configurar jCarousel Lite, indicándole sobre que elemento del DOM deberá de actuar.

jQuery(function() {
jQuery(".galeria").jCarouselLite({
visible: 1,
speed: 2000,
auto: 2000,
});
});

Por último es indicar el código HTML que formará parte del carrousel.

<div id="contenedor">
<div class="galeria">
<ul>
<li>
<div class="preview">
<h2><a href="http://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="http://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="http://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="http://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 podeís ver, es realmente sencillo tener un carrousel en nuestra aplicación.

Vía: Ribosomatic