title: JavaScript carousel using array and for-loop: Why does slideIndex get "stuck" after first loop?
body: <p>I'm trying to create a javascript carousel of scrolling images without jQuery, using an array and a for-loop. </p>
  
  <p>At the end of the 4-object array of images, the "next button" returns to array[slideIndex=0]. </p>
  
  <p>Similarly, when you hit the "previous button" on the first object in the array, it returns the last object in the array.</p>
  
  <p>This function seems to <strong>almost</strong> work with the code I have right now. However, it only works once. After skipping backwards or forwards to the last or first object in the array, it doesn't continue to scroll in the intended direction. </p>
  
  <p>Can you please tell me why the <code>slideIndex</code> doesn't continue to loop with the <code>plusDivs()</code> function after the first skip?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let slides_array = document.getElementsByClassName("mySlides"); 
  
    let slideIndex = 0; 
    showDivs(slideIndex);
    
    function plusDivs(n) {
      slideIndex += n; 
      showDivs(slideIndex); 
    }
    
    function showDivs(slideIndex) { 
      let i; 
      
      if (slideIndex &gt; (slides_array.length - 1)) { 
        slideIndex = 0; 
      }; 
      
      if (slideIndex &lt; 0) { 
        slideIndex = (slides_array.length - 1); 
      }; 
      
      for (i=0; i&lt;(slides_array.length); i++) { 
        slides_array[i].style.display = "none"; 
      } 
        
      slides_array[slideIndex].style.display = "block"; 
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class = "Slideshow"&gt;
    &lt;div id="slide1" class="mySlides"&gt;
      &lt;img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg"&gt;
    &lt;/div&gt;
  
    &lt;div id="slide2" class="mySlides"&gt;
      &lt;img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Shake-shiver-and-tremble-Why-dogs-do-it.jpg?itok=yvOUgQeL"&gt;
    &lt;/div&gt;
  
    &lt;div id="slide3" class="mySlides"&gt;
      &lt;img src="https://i.kinja-img.com/gawker-media/image/upload/s--kx3d-Wgg--/c_scale,fl_progressive,q_80,w_800/ol9ceoqxidudap8owlwn.jpg"&gt;
    &lt;/div&gt;
  
    &lt;div id="slide4" class="mySlides"&gt;
      &lt;img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/korean-jindo-dog-breed-pictures/puppy-1_680-453.jpg"&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;!-- Slideshow Buttons --&gt;
  &lt;button class="button" onclick="plusDivs(-1)"&gt; &amp;#10094; &lt;/button&gt;
  
  &lt;button class="button" onclick="plusDivs(+1)"&gt; &amp;#10095; &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Pardon (and please correct) me if I'm not using the correct technical terms -- I'm trying to describe my current issue as best as I can, but maybe this isn't the best way to describe the problem. Please advise.</p>