Slider automático con javascript con botones
Código para pegar para tu sitio web.
<!------ SLIDER AUTOMÁTICO ------>
<div id="slider_unknowns">
<div id="driver_car">
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left"></i></button>
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
<div class="slider">
<div class="slide current">
<h4 style="margin-bottom: 20px;">Gato Jujuy de los Andes</h4>
</div>
<div class="slide">
<h4 style="margin-bottom: 20px;">Musaraña elefante</h4>
</div>
<div class="slide">
<h4 style="margin-bottom: 20px;">Mono de Myanmar</h4>
</div>
<div class="slide">
<h4 style="margin-bottom: 20px;">Aye aye</h4>
</div>
<div class="slide">
<h4 style="margin-bottom: 20px;">Antilope saiga</h4>
</div>
</div>
</div>
</div>
/****** SLIDER AUTOMÁTICO ******/
#slider_unknowns{
width: 100%;
height: 90vh;
background: rgb(255, 255, 255);
display: flex;
align-items: center;
justify-content: center;
}
#driver_car{
width: 100%;
height: 80vh;
display: flex;
align-content: center;
justify-content: center;
position: absolute;
z-index: 0;
margin: 50px 0px;
}
.slider {
width: 70%;
height: 100%;
position: relative;
z-index: 1;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
display: flex;
align-items: flex-end;
justify-content: center;
}
.slide.current {
opacity: 1;
}
.buttons button#next {
position: absolute;
top: 40%;
right: 25px;
z-index: 2;
}
.buttons button#prev {
position: absolute;
top: 40%;
left: 25px;
z-index: 2;
}
.buttons button {
border: 2px solid #fff;
background-color: rgb(0, 140, 255);
color: rgb(255, 255, 255);
cursor: pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
}
.buttons button:hover {
background-color: rgb(0, 161, 13);
color: #333;
}
// SLIDER AUTOMÁTICO
const slides = document.querySelectorAll('.slide');
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
const auto = true; // Auto scroll
const intervalTime = 5000;
let slideInterval;
const nextSlide = () => {
// Get current class
const current = document.querySelector('.current');
// Remove current class
current.classList.remove('current');
// Check for next slide
if (current.nextElementSibling) {
// Add current to next sibling
current.nextElementSibling.classList.add('current');
} else {
// Add current to start
slides[0].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
};
const prevSlide = () => {
// Get current class
const current = document.querySelector('.current');
// Remove current class
current.classList.remove('current');
// Check for prev slide
if (current.previousElementSibling) {
// Add current to prev sibling
current.previousElementSibling.classList.add('current');
} else {
// Add current to last
slides[slides.length - 1].classList.add('current');
}
setTimeout(() => current.classList.remove('current'));
};
// Button events
next.addEventListener('click', e => {
nextSlide();
if (auto) {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, intervalTime);
}
});
prev.addEventListener('click', e => {
prevSlide();
if (auto) {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, intervalTime);
}
});
// Auto slide
if (auto) {
// Run next slide at interval time
slideInterval = setInterval(nextSlide, intervalTime);
};
