Slideshow will not repeat with SetTimeout function

Question

I am developing this assignment at the moment, and I dearly would like to implement a slideshow. Once I implemented my javascript function the slide show runs for the time I have set it for but once the 4 images got ran, the slide show disappears. Any idea what is going on?

Thanks

user_14237519 · Answer

 var index = 0;
 show();

 function show() {
    var i;
    var slides = document.getElementsByClassName("slide");
    var dots = document.getElementsByTagName("span");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }


    index = index + 1;
    if (index > slides.length) {
        index = 1;
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");

        }
    }
    slides[index - 1].style.display = "block";
    dots[index - 1].className += "active";
    setTimeout(show, 1500);

 }

before:

error on that line if (index > slides.lenght) {}

after:

fix: if (index > slides.length) {}

work like a charm

user_12154893 · Answer

It is a fix for your codes but you can implement a slideshow better by setInterval method than setTimeout or just simply use a slider jQuery plugin.

If you are practicing, then learn jQuery for more powerful features and more simple usage than pure javascript.

var 
  slides = document.getElementsByClassName("slide"),
  dots = document.getElementsByTagName("span"),
  slidedLength = slides.length,
  index = 0,
  i;

function show () {
  // hide all slides
  for(i = 0; i < slidedLength; i++) {
      slides[i].style.display = "none";
  }   
  
  // remove all dots active class
  for(i = 0; i < dots.length; i++){
      dots[i].className = dots[i].className.replace("active", "");
  }

  index = index + 1;
  if(index > slidedLength){
    index = 1;
  }
  
  slides[index - 1].style.display = "block";
  dots[index - 1].className += "active";
  
  setTimeout(show, 1500); 
}
  
// call show function
show();

.dot-container span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #ccc;
  border-radius: 50rem;
  background-color: #f1f1f1;
}

.dot-container span.active {
  background-color: #79a;
}

Slideshow will not repeat with SetTimeout function

2 Answers