.slider {
width: 968px;
height: 829px;
overflow: hidden;
position: relative;
background-image: url('https://www.gopresto.com/i/1716234814232/x968/uploads/content_files/images/test/Packer_Header_1000x856.jpg');
background-size: cover;
background-position: center;
}
.slide,
.slide-text {
width: 100%;
height: 100%;
position: absolute;
}
.slide {
transform: translateX(-100%);
animation: bounceInLeft 0.7s ease-out forwards;
}
.slide-text {
transform: translateX(100%);
animation: bounceInRight 0.7s ease-out forwards;
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-100%);
}
60% {
opacity: 1;
transform: translateX(30px);
}
100% {
transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(100%);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
100% {
transform: translateX(0);
}
}
@media (max-width: 1000px) {
.slider {
width: 100%;
height: auto;
aspect-ratio: 1000 / 856;
}
}
let currentSlide = 0;
const imageSlides = document.querySelectorAll('.slide');
const textSlides = document.querySelectorAll('.slide-text');
function showNextSlide() {
imageSlides[currentSlide].style.display = 'none';
textSlides[currentSlide].style.display = 'none';
currentSlide = (currentSlide + 1) % imageSlides.length;
imageSlides[currentSlide].style.display = 'block';
textSlides[currentSlide].style.display = 'block';
imageSlides[currentSlide].style.animation = 'none'; // Reset animation
textSlides[currentSlide].style.animation = 'none'; // Reset animation
setTimeout(() => { // Reapply animation to restart it
imageSlides[currentSlide].style.animation = 'bounceInLeft 0.7s ease-out forwards';
textSlides[currentSlide].style.animation = 'bounceInRight 0.7s ease-out forwards';
}, 10);
}
setInterval(showNextSlide, 3000);
