First Image
Second Image
Third Image
2. CSS (styles.css) css Copy Edit body { text-align: center; background-color: #f4f4f4; } .slideshow-container { position: relative; max-width: 800px; margin: auto; } .slide { display: none; } img { width: 100%; height: auto; border-radius: 10px; } .fade { animation: fadeEffect 1.5s ease-in-out; } @keyframes fadeEffect { from {opacity: 0.4;} to {opacity: 1;} } 3. JavaScript (script.js) js Copy Edit let slideIndex = 0; showSlides(); function showSlides() { let slides = document.getElementsByClassName("slide"); for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].style.display = "block"; setTimeout(showSlides, 3000); // Change image every 3 seconds }