Spaces:
Running
Running
File size: 3,685 Bytes
350ebe9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<!DOCTYPE html>
<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> |