A slider is a common web element that is used on a variety of websites. This type of slider is basically used to store many types of images together in a website. This slider can automatically change the image.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slide Show</title>
<style type="text/css">
.SlideShow{
max-width: 50%;
position: relative;
max-height: 50%;
}
.ImageSlides{
display: none;
width: auto;
height: 250px;
animation-duration: 2s;
}
</style>
</head>
<body>
<center>
<div class="SlideShow">
<div id="slide1" class="ImageSlides">
<img src="vbart/syera.jpg" style="width: 100%;height: 250px;" />
</div>
<div id="slide2" class="ImageSlides">
<img src="vbart/Chiranjeevi.jpg" style="width: 100%;height: 250px;" />
</div>
<div id="slide3" class="ImageSlides">
<img src="vbart/Nagarjuna.jpg" style="width: 100%;height: 250px;" />
</div>
<div id="slide4" class="ImageSlides">
<img src="vbart/Pawan kalyan%2Bwsg003.jpg" style="width: 100%;height: 250px;" />
</div>
<div id="slide5" class="ImageSlides">
<img src="vbart/Ram Charan.jpg" style="width: 100%;height: 250px;" />
</div>
</div>
</center>
<script type="text/javascript">
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("ImageSlides");
for (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);
}
</script>
</body>
</html>