Inicio > programación, web > CarouFredSel: carrusel de imágenes con jQuery

CarouFredSel: carrusel de imágenes con jQuery

Martes, 28 de Septiembre de 2010

Después de haber visto 2 sliders de imágenes hechas con jQuery y Orbit, pasaré a ver cómo crear un carrusel de imágenes con jQuery basándome en carouFredSel.

CarouFredSel es un plugin de jQuery que nos ayuda a realizar un carrusel de imágenes a partir de un código HTML. El carrusel lo podemos hacer en vertical u horizontal, automático o clickando en los extremos…

Antes de nada tendremos que descargar este plugin. Una vez descargado lo guardaremos en la carpeta donde almacenemos los ficheros javascript (luego lo referenciaremos).

Así que manos a la obra y empecemos ya con el código… Para empezar, añadiremos a un documento HTML con un DOCTYPE válido la inclusión de las librerías javaScript que necesitaremos. Esto lo añadiremos dentro del <Head>:

[js]


[/js]

Si queremos que nuestro carrusel pueda realizar todo tipo de transiciones, podemos añadir también lo siguiente:

[js]
[/js] Y si queremos añadir también pausas automáticas cuando el usuario se encuentra inactivo por un tiempo determinado, añadiremos: [js]
[/js]

Ahora añadiremos el código que convierte nuestras imágenes en un carrusel automático:
[js]

[/js]
En este código anterior hacemos referencia al nombre del DIV donde se alojarán las fotos a mostrar.

Por último pasaremos a crear el código HTML donde listaremos las imágenes a mostrar. Se puede hacer con un DIV o bien con una lista (yo lo haré con un DIV):
[html]

imagen1
imagenes 2
imagenes 3
imagenes 4
imagenes 5
imagenes 6

[/html]

Es importante definir los tamaños de las imágenes para que todo funcione correctamente. Y también es conveniente completar todo esto con un buen estilo de CSS.

Ahora sólo nos queda probar este ejemplo. Podéis visualizarlo en http://www.alexmontes.es/carrusel.html

También podéis consultar toda la documentación existente en la página web del plugin carouFredSel.

En mi próximo artículo profundizaré en el plugin carouFredSel, puesto que proporciona muchas configuraciones que nos permitirán personalizarlo al 100%.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , ,

  1. angie
    Jueves, 22 de Septiembre de 2011 a las 20:58 | #1

    hola, pero sabes como puedo bajarle la velocidad?

  2. Miércoles, 28 de Septiembre de 2011 a las 07:13 | #2

    Hola angie.
    Puedes utilizar el evento play(direction, delay, resumeStopped) en el que delay es el valor de tiempo entre transiciones de imagenes. Con este evento puedes bajar la velocidad.

  3. Miércoles, 3 de Julio de 2013 a las 23:43 | #3

    I’m impressed, I must say. Rarely do I encounter a blog that’s equally educative and amusing, and let me tell you, you’ve hit the nail on the head. The problem is an issue that not enough people are speaking intelligently about. Now i’m very happy I stumbled across this during my search
    for something regarding this.

  4. Jueves, 4 de Julio de 2013 a las 15:41 | #4

    Thanks for your comment!!

  5. Martes, 9 de Julio de 2013 a las 07:37 | #5

    I am in fact thankful to the holder of this web page who has shared this wonderful post at at this time.

  6. Jueves, 11 de Julio de 2013 a las 08:47 | #6

    Thanks!

  1. Sábado, 9 de Octubre de 2010 a las 18:16 | #1