Automatic image slider with setInterval function is not working

Question

Third photo of slider doesn't apper on slide. After a while slide fails completely, photos are changing rapidly. After the slide fail, when photos are changing rapidly, third photo appears sometimes. But I couldn't figure out why it doesn't appears at first and why slide is getting faster. How can I fix this problem?

 let sliderImages = document.querySelectorAll(".slide"); current = 0; function reset() { for(let i = 0; i < sliderImages.length; i++) { sliderImages[i].style.display = "none"; } } function startSlide() { reset(); if(current == sliderImages.length) { current = 0; } sliderImages[current].style.display = "block"; current++; setInterval(startSlide, 2000); } startSlide();

 body, #slider, .wrap, .slide-content { margin: 0; padding: 0; width: 100%; height: 100vh; overflow-x: hidden; }.wrap { position: relative; }.slide { background-size: cover; background-position: center; background-repeat: no-repeat; }.slide1 { background-image: url("https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"); }.slide2 { background-image: url("https://images.pexels.com/photos/3153208/pexels-photo-3153208.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") }.slide3 { background-image: url("https://images.pexels.com/photos/1036641/pexels-photo-1036641.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") }

 <div class="wrap"> <div id="slider"> <div class="slide slide1"> <div class="slide-content"> </div> </div> <div class="slide slide2"> <div class="slide-content"> </div> </div> <div class="slide slide3"> <div class="slide-content"> </div> </div> </div> </div>

Answer 1

You problem is everytime you run the function a new interval is going to be set, so you will end up with a bunch of them running at the same time. You just need to set it once, and then the function will be called every two seconds appropriately. I modified your example:

 let sliderImages = document.querySelectorAll(".slide"); current = 0; function reset() { for(let i = 0; i < sliderImages.length; i++) { sliderImages[i].style.display = "none"; } } function startSlide() { reset(); if(current == sliderImages.length) { current = 0; } sliderImages[current].style.display = "block"; current++; } setInterval(startSlide, 2000);

 body, #slider, .wrap, .slide-content { margin: 0; padding: 0; width: 100%; height: 100vh; overflow-x: hidden; }.wrap { position: relative; }.slide { background-size: cover; background-position: center; background-repeat: no-repeat; }.slide1 { background-image: url("https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"); }.slide2 { background-image: url("https://images.pexels.com/photos/3153208/pexels-photo-3153208.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") }.slide3 { background-image: url("https://images.pexels.com/photos/1036641/pexels-photo-1036641.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") }

 <div class="wrap"> <div id="slider"> <div class="slide slide1"> <div class="slide-content"> </div> </div> <div class="slide slide2"> <div class="slide-content"> </div> </div> <div class="slide slide3"> <div class="slide-content"> </div> </div> </div> </div>