Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Full Screen Image Slideshow</title> | |
| <link rel="stylesheet" href="slideshow.css"> | |
| </head> | |
| <body> | |
| <div class="slideshow-container"> | |
| <div class="slide fade"> | |
| <img src="https://source.unsplash.com/random/1920x1080/?nature,1" alt="Nature Image 1"> | |
| </div> | |
| <div class="slide fade"> | |
| <img src="https://source.unsplash.com/random/1920x1080/?nature,2" alt="Nature Image 2"> | |
| </div> | |
| <div class="slide fade"> | |
| <img src="https://source.unsplash.com/random/1920x1080/?nature,3" alt="Nature Image 3"> | |
| </div> | |
| <div class="slide fade"> | |
| <img src="https://source.unsplash.com/random/1920x1080/?nature,4" alt="Nature Image 4"> | |
| </div> | |
| <div class="slide fade"> | |
| <img src="https://source.unsplash.com/random/1920x1080/?nature,5" alt="Nature Image 5"> | |
| </div> | |
| <!-- Navigation buttons (optional) --> | |
| <a class="prev" onclick="changeSlide(-1)">❮</a> | |
| <a class="next" onclick="changeSlide(1)">❯</a> | |
| </div> | |
| <!-- Slide indicators (optional) --> | |
| <div class="dots-container"> | |
| <span class="dot" onclick="currentSlide(1)"></span> | |
| <span class="dot" onclick="currentSlide(2)"></span> | |
| <span class="dot" onclick="currentSlide(3)"></span> | |
| <span class="dot" onclick="currentSlide(4)"></span> | |
| <span class="dot" onclick="currentSlide(5)"></span> | |
| </div> | |
| <!-- JavaScript CDN --> | |
| <script> | |
| let slideIndex = 1; | |
| let slideInterval; | |
| // Initialize the slideshow | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showSlides(slideIndex); | |
| startAutoSlide(); | |
| }); | |
| // Auto-advance slides | |
| function startAutoSlide() { | |
| slideInterval = setInterval(function() { | |
| changeSlide(1); | |
| }, 5000); // Change slide every 5 seconds | |
| } | |
| // Change slide when clicking prev/next | |
| function changeSlide(n) { | |
| clearInterval(slideInterval); // Reset timer when manually changing | |
| showSlides(slideIndex += n); | |
| startAutoSlide(); // Restart auto-sliding | |
| } | |
| // Go to specific slide | |
| function currentSlide(n) { | |
| clearInterval(slideInterval); // Reset timer when manually changing | |
| showSlides(slideIndex = n); | |
| startAutoSlide(); // Restart auto-sliding | |
| } | |
| function showSlides(n) { | |
| let i; | |
| let slides = document.getElementsByClassName("slide"); | |
| let dots = document.getElementsByClassName("dot"); | |
| // Loop back to first slide if past the end | |
| if (n > slides.length) {slideIndex = 1} | |
| // Loop to last slide if going before first slide | |
| if (n < 1) {slideIndex = slides.length} | |
| // Hide all slides | |
| for (i = 0; i < slides.length; i++) { | |
| slides[i].style.display = "none"; | |
| } | |
| // Remove active class from all dots | |
| for (i = 0; i < dots.length; i++) { | |
| dots[i].className = dots[i].className.replace(" active", ""); | |
| } | |
| // Show the current slide and activate its dot | |
| slides[slideIndex-1].style.display = "block"; | |
| dots[slideIndex-1].className += " active"; | |
| } | |
| </script> | |
| </body> | |
| </html> |