Scribd
Upload
56 views

Slideshow Script

The document contains code for a slideshow container that displays multiple images. It includes CSS for styling elements like the slides and dots. JavaScript code controls the slideshow, displaying each slide for 3 seconds before transitioning to the next and updating the active dot indicator.

Uploaded by

Principal Englishunion
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
56 views

Slideshow Script

The document contains code for a slideshow container that displays multiple images. It includes CSS for styling elements like the slides and dots. JavaScript code controls the slideshow, displaying each slide for 3 seconds before transitioning to the next and updating the active dot indicator.

Uploaded by

Principal Englishunion
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<style>

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.active {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */


@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>

<div class="slideshow-container">
<div class="mySlides fade">

<img src="https://1.bp.blogspot.com/-m2P39X-
IIQM/X5fDI9LLXxI/AAAAAAAABEw/ih7Zd6YCRmEWZ3Z4DhJgewlX4moqUZL9wCPcBGAsYHg/s16000/1.j
pg" style="width:100%" />
</div>
<div class="mySlides fade">

<img src="https://1.bp.blogspot.com/-
eEZ5xzVzUpU/X5fDCfcXOvI/AAAAAAAABEs/sVyWQkqkQXILtY1-
zqC77E6gbIkUY9FBgCPcBGAsYHg/s16000/2.jpg" style="width:100%" />
</div>
<div class="mySlides fade">

<img src="https://1.bp.blogspot.com/-96m-
l1Z1gcU/X5fC8MWh2II/AAAAAAAABEY/5_PgQfNweRI6hwdIxooDCeB1twnRR1zPQCPcBGAsYHg/s16000/
3.jpg" style="width:100%" />
</div>
<div class="mySlides fade">

<img src="https://1.bp.blogspot.com/-
UH8ZyxbuR6E/X5fC1AU0IhI/AAAAAAAABEU/JcIh9aHy9n4fKykhsnqxLNMf2oHbBeiyQCPcBGAsYHg/s16
000/4.jpg" style="width:100%" />
</div>
<div class="mySlides fade">

<img src="https://1.bp.blogspot.com/-wrtqsR9wJA4/X-
r2DZ_cuBI/AAAAAAAAAH0/pgI9bix2fB0JIy9Eg6EuCK8OqjQnjWEWwCLcBGAsYHQ/w426-h640/5.jpg"
style="width:100%" />
</div>
<div class="mySlides fade">

<img src="https://1.bp.blogspot.com/-
a9NhaFGgqL8/YOQQcYvagJI/AAAAAAAAAKE/UoOA6SY3ZUUZw2S9ZJ-
RjhBJDsAceHDuACLcBGAsYHQ/s16000/6.jpg" style="width:100%" />
</div>

</div>
<br>

<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 3000); // Change image every 2 seconds
}
</script>

You might also like