Crear slider de imágenes con varios efectos

Escrito en: Scripts a día 3 Abril 2010

Gracias al framework jQueryque nos permite interactuar con el código HTML de forma mucho más sencilla, crear efectos para la web se ha convertido en algo relativamente sencillo y han aparecido magnificos scripts como jqFancyTransitions.

jqFancyTransition es unSlideshow que utiliza jQuerypara crear un slider(deslizador)de imágenes con diferentesefectos cortina muy vistososen las transiciones de imágenes, puedes ver la siguiente demopara hacerte una idea.

Utilizar este slider es realmente sencillo, tienes que realizar los siguientes pasos:

Lo primero será crear un div donde interiormente introducirás el código de las imágenes de la siguiente manera:

Añadirás a la cabecera de tu página web los scripts jQuery y jqFancyTransitionsque tendrás que descargar y después agregar de la siguiente manera:

Finalmente harás una llamada a la función jqFancyTransition:

Las variables que tendrás que modificar para generar el efecto deseado son las siguientes:

effect: ”, // efectos : wave, zipper, curtain
width: 500,
height: 332,
strips: 20, // número de tiras
delay: 5000, // retardo entre las imágenes en ms
stripDelay: 50, // retardo entre tiras en ms
titleOpacity: 0.7, // opacidad del título
titleSpeed: 1000, // velocidad de aparicion del título en ms
position: ‘alternate’, // top, bottom, alternate, curtain
direction: ‘fountainAlternate’, // left, right, alternate, random, fountain, fountainAlternate
navigation: false // botones de siguiente y anterior (true y false)
links: false // mostrar imágenes como enlaces

Olvídate del flash cuando tengas que hacer un slider de imágenes, con este script conseguirás un efecto similar que podrá ver todo el mundo y además que pesará mucho menos.