Scribd
Upload
95 views2 pages

Slide Show

The document describes how to create an image slideshow on a web page using HTML, CSS, and JavaScript. It includes the code for the slideshow container and slides, navigation dots, and the JavaScript to automatically transition between slides over time.

Uploaded by

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

Slide Show

The document describes how to create an image slideshow on a web page using HTML, CSS, and JavaScript. It includes the code for the slideshow container and slides, navigation dots, and the JavaScript to automatically transition between slides over time.

Uploaded by

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

Slide Show

As we know a web slider/slideshow is a flow of images or text that consists of displaying one
element of the flow in a certain time interval. In real-time conditions, there may be a need
to put an image slideshow on web applications, web pages, or anywhere else.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Style for the slideshow container and slides */
.slideshow-container {
max-width: 600px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

/* Style for navigation dots */


.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active {
background-color: #717171;
}
</style>
</head>
<body>

<div class="slideshow-container">
<!-- Slides -->
<div class="mySlides">
<img src="slide1.jpg" style="width:100%">
</div>

<div class="mySlides">
<img src="slide2.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="slide3.jpg" style="width:100%">
</div>

<!-- Navigation dots -->


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

<script>
// JavaScript for the slideshow functionality
let slideIndex = 0;
showSlides();

function showSlides() {
let i;
const slides = document.getElementsByClassName("mySlides");
const 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, 2000); // Change slide every 2 seconds
}
</script>

</body>
</html>

You might also like