Curso de Javascript | Cómo hacer un slider 1

Curso de Javascript
Cómo hacer un slider

Curso de Javascript | Cómo hacer un slider 2

Curso de Javascript | Cómo hacer un slider

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.  

Cómo hacer un slider por pasos

Haremos el siguiente slider descomponiendo el proceso en los pasos indicados.

Descargar Recurso

Paso 1 – Mostrando / ocultando slides

Cada vez que hacemos click en un botón, vamos haciendo visible un slide y ocultando el anterior que estaba visible.

Para decidir que slide se ve y cuales se ocultan podemos recorrer todas las slides y ocultarlas y luego hacer visible la slide que corresponda, pero también podemos usar un código similar a este:

let position = 0
  
const slides = document.querySelectorAll(".slide");
button.addEventListener("click", ()=>{
        slides[position].style.scale = 0;
        position = (position + 1)%3
        slides[position].style.scale = 1;
})

Paso 2 – Cambiando la clase en lugar del style

En lugar de cambiar los estilos del slider utilizando la propiedad style, añadiremos o eliminaremos al elemento un class que derminará si el slide es visible o no.

Paso 3 – Ajustando el tamaño del slide

Hacer que el tamaño total del slider se ajuste al tamaño de una única diapositiva.