HTML Automatic Slideshow

Question

I'm trying to make an automatic slideshow that covers the whole page and changes photos every 4 seconds, i have this codepen set up for testing but i have no clue whats wrong with it. There is 5 images im currently using and i want it to just change every couple of seconds if possible, I am using bootstrap 3 on the ASP.NET project but it doesn't interfere with anything i do to the slideshow

https://codepen.io/xElectric/pen/poomKQw

 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, 2000); // Change image every 2 seconds } 

 * {box-sizing: border-box;} body {font-family: Verdana, sans-serif;} .mySlides {display: none;} img {} /* Slideshow container */ .slideshow-container { 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} } 

 <div style="max-height: 100vh; overflow: hidden;"> <div class="slideshow-container"> <div class="mySlides fade"> <img src="https://i.imgur.com/vX8LONV.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/a9bx26U.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/PijASuc.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/vX8LONV.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/c8AjEXg.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/srhebZH.jpg" style="width:100vw;"> </div> </div> </div> 

Answer 1

You wrote some useless code in you snippet, which you don't need like dot, dot div you don't have in your HTML code,

 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} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // Change image every 2 seconds } 

 * {box-sizing: border-box;} body {font-family: Verdana, sans-serif;} .mySlides {display: none;} img {} /* Slideshow container */ .slideshow-container { 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} } 

 <div style="max-height: 100vh; overflow: hidden;"> <div class="slideshow-container"> <div class="mySlides fade"> <img src="https://i.imgur.com/vX8LONV.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/a9bx26U.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/PijASuc.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/vX8LONV.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/c8AjEXg.jpg" style="width:100vw;"> </div> <div class="mySlides fade"> <img src="https://i.imgur.com/srhebZH.jpg" style="width:100vw;"> </div> </div> </div> 

if you need any help please inform us!

Happy codin'!