Crear slider de imágenes con varios efectos

Gracias al framework jQuery que 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 un Slideshow que utiliza jQuery para crear un slider(deslizador) de imágenes con diferentes efectos cortina muy vistosos en las transiciones de imágenes, puedes ver la siguiente demo para hacerte una idea.

slider de imagenes

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:

<div id=’Slider’>
<img src=’imagen1.jpg’ alt=imagen1′ />
<img src=’imagen2.jpg’ alt=’imagen2′ />
<img src=’imagen3.jpg’ alt=imagen3′ />
</div>

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

<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/jqFancyTransitions.js” type=”text/javascript”></script>

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

<script>
$(‘#Slider’).jqFancyTransitions({ variables });
</script>

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.

Puedes hacer para continuar leyendo o ¡Puedes dejar un comentario en respuesta al artículo aquí!


Impresionante slider CSS3 que no usa javascript
Impresionante slider CSS3 que no usa javascript
Crear efectos y animaciones en Flash online
Crear efectos y animaciones en Flash online
Slider jQuery, 10 ejemplos diferentes
Slider jQuery, 10 ejemplos diferentes


Artículos relacionados

ManSlide: Presentaciones con efectos 3D
ManSlide: Presentaciones con efectos 3D
Efectos de sombras para PSD
Efectos de sombras para PSD
Webcam Toy, realizar fotos con efectos desde tu webcam
Webcam Toy, realizar fotos con efectos desde tu webcam
28  Tutoriales para conseguir bonitos efectos de jQuery
28 Tutoriales para conseguir bonitos efectos de jQuery