Cómo hacer un slider

Contactar con el profesor

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("+elemento+")").style.transform = "scale(1)";
// El valor de elemento estará entre 1 y 3

Paso 4 – Ajustando el tamaño del slide

Añadiendo únicamente código HTML y CSS haremos que sólo sea visible un slide de cada vez.

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);
← Arrays en Javascript
Hacer un filtro →

Aviso Legal | Política de privacidad