Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
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
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;