.carousel {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.carousel img {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.carousel img.visible {
opacity: 1;
}
.carousel button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
.carousel .prev {
left: 10px;
}
.carousel .next {
right: 10px;
}



let currentIndex = 0;
const images = document.querySelectorAll('.carousel img');
const interval = setInterval(() => {
images[currentIndex].classList.remove('visible');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('visible');
}, 3000);
document.querySelector('.prev').addEventListener('click', () => {
images[currentIndex].classList.remove('visible');
currentIndex = (currentIndex - 1 + images.length) % images.length;
images[currentIndex].classList.add('visible');
});
document.querySelector('.next').addEventListener('click', () => {
images[currentIndex].classList.remove('visible');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('visible');
});