Cómo hacer un slider

Curso de Javascript Online. Desde cero.

11.  
14.  
19.  
26.  

Paso 1 – Mostrando / ocultando slides

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

Para hacer invisible una slide, quitaremos su opacidad y la escalaremos a cero. Este proceso tendrá una transición animada.

document.querySelector(".capa" + contador).style.transform = "scale(1)";
// El valor de contador estará entre 0 y 2

Paso 2 – Cambiando la clase en lugar del slide

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 – Utilizando nth-child

Realizar el mismo ejercicio, pero utilizando el selector nth-child para acceder a las capas y no tener que identificar cada una de manera diferente.

document.querySelector(".capa:nth-child("+contador+")").classlist.add('active);
// El valor de elemento estará entre 1 y 3

Paso 4 – Ajustando el tamaño del slide

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

Paso 5 – Evitando harcodear el número de elementos

Ahora el contador irá desde cero hasta el número total de elementos que hay dentro del slider. De esta forma, si dentro del slider ponemos más capas, el código debería seguir funcionando. Recuerda que puedes obtener la longitud de un array accediendo a su propiedad .length

Paso 6 – Poniendo las flechitas de cambio de dirección

Modificaciones opcionales

El slider cambia de dirección

Pista:
let contador = 0;
if(contador>=n-1|| contador <1){
	signo = signo*(-1);
}
contador = contador + signo;

El slider avanza automáticamente

Pista:
setInterval(avanza, 1000);
← foreach para manipular el DOM
Hacer un filtro →