Slider con ayuda de Javascript
Código para pegarlo en tu sitio web.
HTML5
<div id="contenedor_slider">
<div id="slider">
<img src="https://images.unsplash.com/photo-1564148204877-9bf116988675?q=80&w=1674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 1">
<img src="https://plus.unsplash.com/premium_photo-1674257750724-893425035b2f?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 2">
<img src="https://images.unsplash.com/photo-1548097160-627fd636ee56?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Image 3">
</div>
<div class="btn_slide">
<button id="prev">Anterior</button>
<button id="next">Siguiente</button>
</div>
</div>
CSS3
#contenedor_slider{
width: 100%;
height: auto;
background: rgb(42, 143, 211);
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.btn_slide{
}
#slider {
width: 600px;
height: 350px;
overflow: hidden;
position: relative;
background: black;
}
#slider img {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
JAVASCRIPT
const prev = document.getElementById('prev');
const next = document.getElementById('next');
const images = document.querySelectorAll('#slider img');
let currentImage = 0;
function showImage(n) {
images.forEach(img => img.style.opacity = '0');
images[n].style.opacity = '1';
currentImage = n;
}
prev.addEventListener('click', () => {
currentImage--;
if (currentImage < 0) currentImage = images.length - 1;
showImage(currentImage);
});
next.addEventListener('click', () => {
currentImage++;
if (currentImage >= images.length) currentImage = 0;
showImage(currentImage);
});
showImage(currentImage);
