Crear un slideshow / carrusel simple con JQuery
Crear un slideshow / carrusel simple con Jquery. Esto es lo que me ha pedido un ejercicio de la asignatura de Diseño de interfaces web.
La librería JQuery permite, entre otras funciones, la creación de efectos y animaciones de forma sencilla, haciendo uso de JavaScript. Es realmente útil, muy usada y a no le afecta la compatibilidad entre navegadores. Pero claro, no todo puede ser perfecto.
JQuery no puede repetir sin ayuda la ejecución de ciertos efectos.
Tras probar distintos sistemas, comprobé que no se puede utilizar de la forma que yo pensaba (mediante bucles, por ejemplo) la librería de JQuery, ya que se ejecuta una vez y no puede volver a ejecutar los efectos sin la ayuda de instrucciones de JavaScript como setInterval().
No es una forma demasiado elegante de ejecutar una función, pero JavaScript tiene esas cosillas que hacen la vida de los programadores más interesante… 😉
Buscando en internet encontré múltiples enlaces a librerías que consiguen crear un slideshow con múltiples efectos y funcionalidades, pero no era eso lo que necesitaba.
Tras varios intentos infructuosos y con la ayuda de mi compañero Adrián Morillas Martínez, entendí que la forma sencilla de realizar el slideshow o carrusel era mediante la animación del primer elemento y, acto seguido, colocar dicho elemento al final de la lista.
El código es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <title>Slider simple con jQuery</title> <script type="text/JAVASCRIPT" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function() { setInterval( function() { // asignamos a una variable el valor de los elementos primero var primero = $('ul#slideshow').find('li').eq(0); // lo mostramos en un segudo y lo ocultamos en un segundo $(primero).fadeIn(1500).fadeOut(1500); // añadimos el primer elemento al final, con lo que pasa a ser el último $('ul#slideshow').append($(primero)); },3000); }); </script> <style> #slideshow li { display: none; } </style> </head> <body> <ul id="slideshow"> <li> <h2 rel="yummy fruit!">Fruit</h2> <img src="fruit.jpg" alt="fruit" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> <li> <h2>Vegetables</h2> <img src="vegetable.jpg" alt="vegetables" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> <li> <h2>Bread</h2> <img src="bread.jpg" alt="bread" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> </ul> </body> </html> |
Y aqui está el fichero, que puedes probar directamente pulsando sobre él o descargarlo (ya sabes cómo si estás leyendo este artículo 🙂 ).
Enlace a sliderSimpleJQuery.html
Analizando el código del slideshow / carrusel con detalle
En las primeras líneas definimos la cabecera HTML 5, indicamos el nombre de la página y enlazamos a la librería de JQuery desde el CDN de Google.
En el contenido del body hemos creado una lista no ordenada y dentro de cada uno de los tres elementos de lista hemos incluido un titular de tipo H2, una imagen y un párrafo de texto. Como podemos ver, la flexibilidad de este slideshow /carrusel no se limita a cambiar imágenes.
En el estilo indicamos que los elementos de lista del elemento con identificador de nombre «slideshow» no deben mostrarse.
|
1 2 3 4 5 |
<style> #slideshow li { display: none; } </style> |
Dicho estilo puede ser modificado desde JQuery, pero no debemos hacerlo si no es estrictamente necesario, para mejorar la legibilidad y mantenimiento del código.
Función de slideshow / carrusel
La función propiamente dicha son sólo tres líneas de código, pero vamos a explicarla con detalle.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function() { setInterval( function() { // asignamos a una variable el valor de los elementos primero var primero = $('ul#slideshow').find('li').eq(0); // lo mostramos en un segudo y lo ocultamos en un segundo $(primero).fadeIn(1500).fadeOut(1500); // añadimos el primer elemento al final, con lo que pasa a ser el último $('ul#slideshow').append($(primero)); },3000); }); </script> |
En este caso, y por comodidad y poca extensión del código, hemos incluido el script dentro del HTML, aunque no es una buena práctica.
En la primera línea del script indicamos que se ejecuten el código sólamente tras haber cargado el árbol DOM del documento.
En este momento, se ejecuta la función anónima que incluimos dentro de setInterval(), y además se vuelve a ejecutar cada vez que pasa el tiempo que le indicamos, en este caso, 3000 ms, o lo que es lo mismo, 3 segundos. Hay que tener en cuenta que para que el slideshow / carrusel funcione correctamente, este tiempo tiene que ser la suma de los tiempos que incluimos dentro del slideshow / carrusel.
La función crea una variable llamada «primero» que hace referencia al primer elemento de lista de la lista no ordenada con identificación de nombre «slideshow». Esto no es necesario pero ayuda a la legibilidad del código.
En este punto es interesante recordar que las máquinas van a entender el código aunque para nosotros sea poco legible, pero debemos tener en cuenta que el código debe crearse pensando en que una persona debe poder leerlo y entenderlo.
Animación mediante fadeIn() y fadeOut()
Acto seguido hacemos uso de las funciones fadeIn() y fadeOut(), pasando como parámetro el tiempo que queremos que tarde en hacer el efecto, expresado en milisegundos.
Hay que tener en cuenta que debemos utilizar el chaining o encadenamiento de JQuery, es decir, que ejecute una función después de otra para que no se solapen. En este punto es donde debemos tener en cuenta (tal y como hemos indicado más arriba) que la suma de ambos efectos debe ser igual a lo que tarda la función setInterval() para evitar solapamientos.
Asignación del primer elemento al final de la lista
Finalmente, añadimos el primer elemento al final de la lista, con lo que pasa a ser el último, y el segundo pasa a ser el primero. Para ello utilizamos la función append(). Cada vez que se ejecute esta función, volverá a repetir la reasignación de elementos.
¿Felicitaciones o quejas? ¡Comenta y comparte!
El slideshow / carrusel simple puede ser fácilmente mejorado y modificado.
Si te ha gustado o has detectado un error, te agradezco tus comentarios, y puedes compartirlo mediante los enlaces habilitados.
¡Gracias por tu visita!