Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Reto #4: Crear un slider usando solo JS
Actualizado el 23 Abril, 2016 y leído 2,159 veces
Calificación: 10.00 / 10

Reto #4: Crear un slider usando solo JS

Anexsoft

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:

 

 

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.