Reto #4: Crear un slider usando solo JS

Este reto consiste en implementar nuestro propio slider usando javascript puro.

Rodríguez Patiño, Eduardo
2020-09-28 | 5,763 lecturas

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:

  1. Solo se usará javascript, no plugins, no ANGULAR, menos jQuery ¬¬'.
  2. Cuando la transición entre imágenes llegue a la última, deberá regresar a la primera imagen. De esta manera creamos un bucle infinito.
  3. 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.
  4. Al pasar el mouse sobre el Slider debemos detener la transición actual al salir. Al salir del Slider demos retomar la transición.
  5. 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.
  6. 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.
  7. 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: