title: Slideshow will not repeat with SetTimeout function
body: <p>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?</p>
  <pre><code>&lt;div class=&quot;slide-container&quot;&gt;
      &lt;div&gt;
      &lt;img class=&quot;effect slide&quot; src=&quot;images/12apostles.jpg&quot; &gt;
      &lt;img class=&quot;effect slide&quot; src=&quot;images/bay-melbourne.jpg&quot;&gt;
      &lt;img class=&quot;effect slide&quot; src=&quot;images/marina-hotel.jpg&quot;&gt;
      &lt;img class=&quot;effect slide&quot; src=&quot;images/pool-marina.jpg&quot;&gt;
      
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class=&quot;dot-container&quot;&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
  
    &lt;/div&gt;
    &lt;main&gt;
    &lt;script&gt;
      var index=0;
      show();
      function show () {
      var i;
      var slides=document.getElementsByClassName(&quot;slide&quot;);
      var dots=document.getElementsByTagName(&quot;span&quot;);
      for(i=0;i&lt;slides.length;i++) {
          slides[i].style.display=&quot;none&quot;;
      }   
          
  
      index= index+1;
      if(index&gt;slides.lenght){
          index=1;
      for(i=0;i&lt;dots.length;i++){
          dots[i].className=dots[i].className.replace(&quot; active&quot;, &quot;&quot;);
  
      }
      }
      slides[index-1].style.display = &quot;block&quot;;
      dots[index-1].className+=&quot;active&quot;;
      setTimeout(show, 1500); 
  
  }
  &lt;/script&gt;
  </code></pre>
  <p>Thanks</p>