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 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.querySelector("slide");
button.addEventListener("click", ()=>{
slide[position].style.scale = 0;
position = (position + 1)%3
slide[position].style.scale = 1;
})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 – Ajustando el tamaño del slide
Paso 5 – Poniendo las flechitas de cambio de dirección
<!--
<style>
.container {
display: flex;
width: 900px;
transition: 0.5s;
}
.slide {
width: 300px;
height: 300px;
transition: 1s;
transform: scale(0);
}
.slider-container {
width: 300px;
height: 300px;
overflow: hidden;
}
.active {
transform: scale(1);
opacity: 1;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
<button>Pulsar</button>
<div class="slider-container">
<div class="container">
<div class="slide red"></div>
<div class="slide blue"></div>
<div class="slide green"></div>
</div>
</div>
<script>
let position = 0;
const slides = document.querySelectorAll('.slide');
const container = document.querySelector('.container')
document.querySelector('button').addEventListener('click', () => {
slides[position].classList.remove('active')
position = position < slides.length - 1 ? position + 1 : 0;
slides[position].classList.add('active')
container.style.marginLeft = -position * 300 + 'px';
})
</script>
-->Modificaciones opcionales
El slider cambia de dirección
Pista:
let contador = 0;
if(contador>=n-1|| contador <1){
signo = signo*(-1);
}
contador = contador + signo;