Inicio > programación, web > Slider avanzado de imágenes en jQuery con Orbit

Slider avanzado de imágenes en jQuery con Orbit

Jueves, 23 de Septiembre de 2010


Una vez visto cómo crear de manera muy sencilla y rápida un slider de imágenes en jQuery con Orbit, pasaré a profundizar en el tema para personalizar ese slider. Recordad que podéis ver el resultado del slider en la página de pruebas que hice.

La personalización del slider a través de Orbit es muy sencilla. Simplemente cambiaremos un poco el código del primer ejemplo y veremos cual es el resultado.


Sólo hay que modificar el código Javascript donde inicializábamos Orbit. Teníamos este código:
[js]

[/js]

Y lo cambiaremos para que quede así:
[js]

[/js]

A partir de aquí, podéis jugar con las opciones como queráis. Tened en cuenta que:

  • animation puede ser: fade, horizontal-slide o vertical-slide
  • advancedSpeed es el tiempo entre transiciones si el timer está activado
  • captions puedes activarlo si la imagen contiene título, el cual será incluido en el pie de la imagen

Como véis es muy sencillo personalizarlo y el efecto final es muy bueno.

Os dejo un ejemplo hecho por mi en: http://www.alexmontes.es/slider2.html

Si os animáis a crear vuestros sliders, podéis enviarme vuestros enlaces a las páginas webs donde aparecen y crearé un artículo haciendo referencia a vuestras creaciones.

¿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. Miércoles, 22 de Mayo de 2013 a las 02:47 | #1

    An execllent post! Just wondering if anybody has any any
    links or screenshots of excellent Email Templates used?
    It certainly is good to see templates, one other thing to see examples to benchmark as good communication.

    Will be eager to see any links.

  1. Jueves, 23 de Septiembre de 2010 a las 19:49 | #1