Lightbox在图像中循环的问题

Question

我的灯箱在图像中正确循环时遇到了一些问题，我想避免使用插件进行学习，但最后我遇到了一些麻烦。画廊看起来很棒，减去一些断点问题，但我会到达那里。我遇到的问题是让灯箱正确地循环图像，它一旦激活就会在垂直，可滚动的列中显示所有图像。

function openModal() {
    document.getElementById('myModal').style.display = "block";
  }

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

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 > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < 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;
}

ul {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

ul li {
  list-style: none;
  margin-bottom: 25px;
}

ul li img {
  cursor: pointer;
}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

div.responsivecontainer {
  width=80%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
  #gallery li:nth-child(odd) {
    clear: left;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="responsivecontainer">
  <div class="row">
    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(1)" alt="Louvered Roll Die antiwrap sensor" width="300" height="200">
        </a>
        <div class="desc">Louvered Roll Die antiwrap sensor</div>
      </div>
    </div>


    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(2)" alt="Compact roll die and starblade module in headstand" width="300" height="200">
        </a>
        <div class="desc">Compact roll die </div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(3)" alt="Compact roll die and starblade module in headstand" width="300" height="200">
        </a>
        <div class="desc">Compact roll die </div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(4)" alt="Turbulator" width="300" height="200">
        </a>
        <div class="desc">Turbulator</div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(5)" alt="Oil cooler dies" width="300" height="200">
        </a>
        <div class="desc">Oil cooler dies</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(6)" alt="Bump Die" width="300" height="200">
        </a>
        <div class="desc">Bump Die</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(7)" alt="Louvered roll dies" width="300" height="200">
        </a>
        <div class="desc">Louvered roll dies</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(8)" alt="Louvered roll die" width="300" height="200">
        </a>
        <div class="desc">Louvered roll die</div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(9)" alt="Roll die with copper material" width="300" height="200">
        </a>
        <div class="desc">Roll die with copper material</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(10)" alt="Bump die" width="300" height="200">
        </a>
        <div class="desc">Bump die</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(11)" alt="Turbulator" width="300" height="200">
        </a>
        <div class="desc">Turbulator</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(12)" alt="Louvered Die" width="300" height="200">
        </a>
        <div class="desc">Louvered Die</div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(13)" alt="European style roll dies and gears" width="300" height="200">
        </a>
        <div class="desc">European style roll dies and gears</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(14)" alt="European style roll die and starblade unit in headstand" width="300" height="200">
        </a>
        <div class="desc">European style roll</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(15)" alt="Louvered Die" width="300" height="200">
        </a>
        <div class="desc">Louvered Die</div>
      </div>
    </div>

    <div class="responsive">
      <div class="gallery">
        <a target="_blank">
          <img src="http://placehold.it/300x200" onclick="openModal();currentSlide(16)" alt="Ten inch roll die" width="300" height="200">
        </a>
        <div class="desc">Ten inch roll die</div>
      </div>
    </div>
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">5 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">6 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">7 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">8 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">9 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">10 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">11 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">12 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">13 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">14 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">15 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">16 / 16</div>
      <img src="http://placehold.it/300x200" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(1)" alt="Louvered Roll Die antiwrap sensor">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(2)" alt="Compact roll die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(3)" alt="Compact roll die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(4)" alt="Turbulator">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(5)" alt="Oil cooler dies">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(5)" alt="Bump Die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(7)" alt="Louvered roll dies">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(8)" alt="Louvered roll die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(9)" alt="Roll die with copper material">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(10)" alt="Bump die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(11)" alt="Turbulator">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(12)" alt="Louvered Die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(13)" alt="European style roll dies and gears">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(14)" alt="European style roll">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(15)" alt="Louvered Die">
    </div>

    <div class="gallery">
      <img class="demo" src="http://placehold.it/300x200" onclick="currentSlide(16)" alt="Ten inch roll die">
    </div>
  </div>
</div>
<br></br>
<br></br>

关闭，但我一直在寻找更传统的滑盖体验。非常感谢您的帮助。