Código HTML5
<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"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
Código CSS
#driver_car{
width: 100%;
height: 60vh;
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;
}
.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;
}
/* Backgorund Images */
.slide:first-child {
background: url('https://images.unsplash.com/photo-1493238792000-8113da705763?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHx8&w=1000&q=80') no-repeat
center center/cover;
}
.slide:nth-child(2) {
background: url('https://www.xtrafondos.com/descargar.php?id=9162&resolucion=3840x2160') no-repeat
center center/cover;
}
.slide:nth-child(3) {
background: url('https://c4.wallpaperflare.com/wallpaper/971/1023/719/abstracto-coche-wallpaper-preview.jpg') no-repeat
center center/cover;
}
.slide:nth-child(4) {
background: url('https://images7.alphacoders.com/338/338509.jpg') no-repeat
center center/cover;
}
.slide:nth-child(5) {
background: url('https://source.unsplash.com/ULmaQh9Gvbg/1600x900') no-repeat
center top/cover;
}
.slide:nth-child(6) {
background: url('https://source.unsplash.com/ggZuL3BTSJU/1600x900') no-repeat
center center/cover;
}
Código Javascript
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);
}
No hay comentarios:
Publicar un comentario