Se nos vino el reto #4, al igual que los demás, este será con puro javascript (vainilla code).
Objetivo
- Implementar un algoritmo que permita generar transición entre un grupo de imágenes (Slider).
Instrucciones
Las pautas que debemos considerar son las siguientes:
- Solo se usará javascript, no plugins, no ANGULAR, menos jQuery ¬¬'.
- Cuando la transición entre imágenes llegue a la última, deberá regresar a la primera imagen. De esta manera creamos un bucle infinito.
- Las imágenes mostradas estan con display:none, por lo tanto deberíamos jugar con esto para mostrar la imágen que prosigue en la transición.
- Al pasar el mouse sobre el Slider debemos detener la transición actual al salir. Al salir del Slider demos retomar la transición.
- El HTML, las imágenes y CSS ya lo he codificado, lo que queda pendiente es el algoritmo en javascript. Ustedes deben implementar esto, encontrarán el HTML base en el enlace adjunto o al final de la página.
- En el enlace adjunto encontrarán todo el codigo necesario, hay una función ya creada llamada mySlider(a, b). Ustedes deberán escribir el código dentro de ella.
- El primer parámetro es el ID del div que será el contenedor.
- El segundo parámetro es el tiempo que tardará por transición.
- EXTRA: si quieres ponerle mas emoción al reto podrías crear un efecto de transición en cada cambio de imagen.
NOTA: quería usar JS Fiddle pero no deja trabajar con imágenes, por lo tanto cambié a Code pen.
TIP: la lógica para mostrar las imágenes es jugar con los display:none, ya que así lo he maquetado.
¿A dónde mando mi código?
Para enviar tu código debes haber seguido al pie de la letra las instrucciones dadas y dejar un comentario adjutando su enlace de Code Pen o cualquier otra web que permita visualizar código en línea.
Personas que han participado:
-
Eduardo Rodríguez Patiño
Les comparto mi código, espero les haya gustado participar en este nuevo evento.
Enlace: http://codepen.io/anexsoft/pen/GZBxpB -
Jorge
Bien jugado, aunque no era necesario agregarle un evento a cada item para detener la transición. Suficiente era poner al contenedor de todos los .items.
Enlace: http://codepen.io/jorge12745/pen/eZjMMg
- Nuestros cursos -
