jQuery es una librería fantástica y muy útil para los que trabajamos cada día con Javascript, y si encima trabajas con imagenes ahora puedes mejorar la presentación de las mismas con jCarousel, una librería que usa jQuery para hacer pasear nuestras imagenes por nuestra web con una infinidad de opciones.
Modo de uso
Incluimos los ficheros necesarios en nuestro <head></head>
<script src="path-to-file/jquery.js"></script>
<script src="path-to-file/jcarousel.js"></script>Y declaramos nuestro carousel justo despues de la inclusión de los fichero.
<script type="text/javascript">
$(document).ready(function() {
$('.jcarousel').jcarousel({
// Configuration goes here
});
});
</script>Colocamos nuestro carousel en el lugar de la página donde queramos que aparezca de la siguiente forma.
<div class="jcarousel">
<img src="prev-disabled.gif" class="jcarousel-prev" />
<img src="next-disabled.gif" class="jcarousel-next" />
<div class="jcarousel-clip">
<ul class="jcarousel-list">
<!-- The content goes in here -->
</ul>
</div>
</div>Configuración
| Propiedad | Tipo |
Default | Descripcion |
|---|---|---|---|
| orientation | string | “horizontal” | Especifica la orientación del carousel “horizontal” o “vertical” |
| itemWidth | integer | 100 | El width de cada <li> |
| itemHeight | integer | 100 | El height de cada <li>.
|
| itemVisible | integer | 3 | El número de items visibles. |
| itemScroll | integer | Value of itemVisible | El número de items que queremos que hagan scroll |
| scrollAnimation | mixed | “fast” | Velocidad en la que hace el scroll, pueden usarse “fast”, “slow” o un número de milisegundos. |
| autoScroll | integer | 0 | Activamos o desactivamos el autoScroll. |
| autoScrollStopOnInteract | boolean | true | Especificamos que hacer cuando el autoScroll para por un click en los botones “next” o “prev” |
| wrap | boolean | false | Especifica que hacer cuando llega al último item y empiece por el primero. |
| loadItemHandler | function | null | Función JavaScript que se llamará al cargar el objeto encargado de crear el carousel. |
| nextButtonStateHandler | function | null | Función Javascript que se llamará al hacer click en el botón de “next” |
| prevButtonStateHandler | function | null | Función Javascript que se llamará cuando hagamos click en el botón “prev” |
Ejemplos
[Horizontal] [Vertical] [AutoScroll] [Con Ajax] [Con Ajax desde Flickr]
Descargar
4 comentarios, 3 referencias
+
#