Juanma Santoyo

En ocasiones me llaman friki

jsCarousel, plugin jQuery para carruseles de imágenes sencillos en HTML5

El propósito de jsCarousel es mejorar la presentación de una lista de enlaces accesible HTML5 transformándola en una rotación de imágenes. Si solo necesitas una rotación de imágenes sin enlazar, este no es tu plugin (aunque te invito a que obtengas sus fuentes y lo modifiques).


Descarga

Puedes descargar jsCarousel desde su repositorio de GitHub.

jsCarousel en GitHub

Inicialización

Inicializar jsCarousel es sencillo, tan sencillo como una simple llamada si nos sirve la configuración por defecto:

También podemos especificar una configuración inicial:

Ver:

Configuración

La configuración es un objeto que puede informarse en la inicialización del plugin o mediante el método options.

autoStart

Boolean. Por defecto false.

Determina si el carrusel debe iniciar automáticamente después de cargar o no.

direction

Int. Por defecto 1.

Determina el la dirección del carrusel. 1 hacia delante, -1 hacia detrás.

effect

String. Por defecto “simple”.

Determina el tipo de efecto que se aplicará a la transición entre imágenes. Sus valores pueden ser:

simple

La imagen simplemente cambiará a la siguiente.

fade

La imagen se desvanecerá, apareciendo la siguiente imagen progresivamente.

slide

La imagen se deslizará, apareciendo la siguiente imagen progresivamente.

effectDuration

Int. Por defecto 500.

Determina la duración de la transición entre imágenes, en milisegundos.

height

String. Por defecto “auto”.

Determina la altura del espacio reservado para el carrusel. Se recomienda la altura de la imagen más alta que intervenga.

Es recomendable resolver esta funcionalidad por CSS, asignando la altura al elemento contenedor del carrusel.

interval

Int. Por defecto 1000.

Determina el tiempo que transcurrirá entre transiciones, en milisegundos.

width

String. Por defecto “auto”.

Determina el ancho del espacio reservado para el carrusel. Se recomienda el ancho de la imagen más ancha que intervenga.

Es recomendable resolver esta funcionalidad por CSS, asignando el ancho al elemento contenedor del carrusel.

Métodos

addCallback

Permite añadir un callback a una acción determinada.

Parámetros

nombre

String.

El nombre de la acción a la que se quiere vincular el callback.

callback

function.

Es la lógica que queremos vincular a la acción.

Retorno

El contexto que ha invocado al método. Este método permite encadenamientos.

Ver:

next

Mueve el jsCarousel a la imagen siguiente.

Esta función no reinicia las transiciones automáticas del jsCarousel, por lo que se recomienda combinar su uso con start y stop.

Retorno

El contexto que ha invocado al método. Este método permite encadenamientos.

Ver:

options

Permite informar un nuevo objeto de opciones al jsCarousel, o obtener la configuración actual.

Parámetros

opciones

Objeto de configuración, opcional.

Es el objeto que contendrá los nuevos valores de opciones.

Retorno

Objeto de configuración.

El objeto de configuración que se está usando actualmente.

Ver:

previous

Mueve el jsCarousel a la imagen anterior.

Esta función no reinicia las transiciones automáticas del jsCarousel, por lo que se recomienda combinar su uso con start y stop.

Retorno

El contexto que ha invocado al método. Este método permite encadenamientos.

removeCallback

Permite eliminar el callback a una acción determinada.

Parámetros

nombre

String.

El nombre de la acción de la que se quiere eliminar el callback.

Retorno

El contexto que ha invocado al método. Este método permite encadenamientos.

Ver:

start

Inicia las transiciones automáticas del jsCarousel.

Retorno

El contexto que ha invocado al método. Este método permite encadenamientos.

stop

Detiene las transiciones automáticas del jsCarousel.

Retorno

El contexto que ha invocado al método. Este método permite encadenamientos.

Callbacks

onLoad

Se produce cuando se ha cargado complétamente el carrusel y las imágenes.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

One Comment

  1. Voy a intentar este método en la version responsive de esta web. Gracias por los aportes.

Deja un comentario

Los campos obligatorios están marcados con *.