title: javascript not selecting correct image from index
body: <p>I am still learning html/css and know nothing about javascript. I copied some script from the internet to use for an image gallery. The script to advance the image is working but the script that selects an image from the index is selecting the wrong image. Any help would be great.
  Thanks</p>
  <p>That is really the extent of my question but I am being prompted to enter more details.
  Thanks again</p>
  <p><a href="https://codepen.io/dougwilliams/pen/abNopKd" rel="nofollow noreferrer">codepen</a></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>var slideIndex = 1;
  showDivs(slideIndex);
  
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }
  
  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n &gt; x.length) {slideIndex = 1}
    if (n &lt; 1) {slideIndex = x.length}
    for (i = 0; i &lt; x.length; i++) {
      x[i].style.display = "none";  
    }
    x[slideIndex-1].style.display = "block";  
  }
  
  var slideIndex = 1;
  showSlides(slideIndex);
  
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  
  function currentSlide(n) {
    showSlides(slideIndex += n);
  }
  
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    if (n &gt; slides.length) {slideIndex = 1}
    if (n &lt; 1) {slideIndex = slides.length}
    for (i = 0; i &lt; slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i &lt; dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* *::before *::after {
    box-sizing: border-box;
    margin: 0;
  }
  
  html { 
    background: url(../images/sara-bg-wide.jpg)
    no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
    
  body {
    color:  #000;
    font-family: Arial, "Helvetica Neue", Helvetica,sans-serif;
    text-align: center;
    margin: 0;
  }
  
  button {
    outline: none;
  }
    
  a:link, a:visited, a:active {
    color: darkolivegreen;
    text-decoration: none;
  }
  
  a:hover {
    color: darkolivegreen;
  }
  
  .hidden {
    display:none;
  }
  
  .cursor {
    cursor: pointer;
  }
  
  
  
  .container {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    }
  
  .top {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 90vh;
    background: rgba(255, 255, 255, 0.7);
  }
  
  .art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    height: 100vh;
  }
  
  .nav-button {
    height: 30px;
    padding: 20px 10px;
  }
  
  .left, .right {
    height: 25px;
    width: 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    color: white;
    background-color: darkolivegreen;
    border: none;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .left {
    margin-left: 15px;
  }
  
  .art-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .art-container img {
    width: 85%;
    border: solid 3px darkolivegreen;
    align-self: center;
  }
  
  .index-container {
    display: flex;
    flex-direction: column;
    width: 55%;
    min-height: 0;
  }
  
  .index {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: auto;
    min-height: 0;
  }
  
  .column {
    flex: 1 1 auto;
    max-width: 120px;
    padding: 10px;
  }
  
  .column img {
    width: 100%;
    border: solid 3px darkolivegreen;
  }
  
  .active,
  .demo:hover {
    opacity: .7;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="top"&gt;
      &lt;div class="art"&gt;
              &lt;div class="nav-button"&gt;
                  &lt;button class="left" onclick="plusDivs(-1)"&gt;&amp;#10094;&lt;/button&gt; 
        &lt;/div&gt;
      
            &lt;div class="art-container"&gt;
                &lt;img class="mySlides" src="http:/theuglybook.com/tests/sara/work/images/1.jpg"&gt;
                &lt;img class="mySlides hidden" src="http:/theuglybook.com/tests/sara/work/images/2.jpg"&gt;
                &lt;img class="mySlides hidden" src="http:/theuglybook.com/tests/sara/work/images/3.jpg"&gt;
                &lt;img class="mySlides hidden" src="http:/theuglybook.com/tests/sara/work/images/4.jpg"&gt;
                &lt;img class="mySlides hidden" src="http:/theuglybook.com/tests/sara/work/images/5.jpg"&gt;
                &lt;img class="mySlides hidden" src="http:/theuglybook.com/tests/sara/work/images/6.jpg"&gt;
        &lt;/div&gt;
      
            &lt;div class="nav-button"&gt;
                  &lt;button class="right" onclick="plusDivs(1)"&gt;&amp;#10095;&lt;/button&gt;
            &lt;/div&gt;
      &lt;/div&gt;
      
          &lt;div class="index-container"&gt;
              &lt;div class="index"&gt;
                  &lt;div class="column"&gt;
                  &lt;img class="demo cursor" src="http:/theuglybook.com/tests/sara/work/images/1-index.jpg" onclick="currentSlide(1)"alt=""&gt;
                  &lt;/div&gt;
  
                  &lt;div class="column"&gt;
                  &lt;img class="demo cursor" src="http:/theuglybook.com/tests/sara/work/images/2-index.jpg" onclick="currentSlide(2)"alt=""&gt;
                  &lt;/div&gt;
  
                  &lt;div class="column"&gt;
                  &lt;img class="demo cursor" src="http:/theuglybook.com/tests/sara/work/images/3-index.jpg" onclick="currentSlide(3)"alt=""&gt;
                  &lt;/div&gt;
  
                  &lt;div class="column"&gt;
                  &lt;img class="demo cursor" src="http:/theuglybook.com/tests/sara/work/images/4-index.jpg" onclick="currentSlide(4)"alt=""&gt;
                  &lt;/div&gt;
  
                  &lt;div class="column"&gt;
                  &lt;img class="demo cursor" src="http:/theuglybook.com/tests/sara/work/images/5-index.jpg" onclick="currentSlide(5)"alt=""&gt;
                  &lt;/div&gt;    
  
                  &lt;div class="column"&gt;
                  &lt;img class="demo cursor" src="http:/theuglybook.com/tests/sara/work/images/6-index.jpg" onclick="currentSlide(6)"alt=""&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      
  &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>