Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Cómo hacer un slider por pasos
Haremos el siguiente slider descomponiendo el proceso en los pasos indicados.
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.