следующий предыдущий onclick не будет продвигаться мимо изображения 9 в модальном слайд-шоу

Question

Я создал слайд-шоу с использованием скрипта w3schools и изменил его для своего сайта. У меня есть несколько изображений, которые я хотел бы показать, но когда я добираюсь до изображения 9, следующая кнопка возвращается к 2, а не к 10. Под изображением есть точки под каждым изображением в слайд-шоу, и они работают нормально.

Как я могу изменить "следующее" "предыдущее", чтобы работать мимо изображения 9? Или я что-то пропустил где-то еще?

// Get the modal
var modalparent = document.getElementsByClassName("modal_multi");
// Get the button that opens the modal
var modal_btn_multi = document.getElementsByClassName("myBtn_multi");
// Get the span element that closes the modal
var span_close_multi = document.getElementsByClassName("close_multi");
// When the user clicks the button, open the modal
function setDataIndex() {
  for (i = 0; i < modal_btn_multi.length; i++) {
    modal_btn_multi[i].setAttribute('data-index', i);
    modalparent[i].setAttribute('data-index', i);
    span_close_multi[i].setAttribute('data-index', i);
  }
}

for (i = 0; i < modal_btn_multi.length; i++) {
  modal_btn_multi[i].onclick = function() {
    var ElementIndex = this.getAttribute('data-index');
    modalparent[ElementIndex].style.display = "block";
  };
  span_close_multi[i].onclick = function() {
    var ElementIndex = this.getAttribute('data-index');
    modalparent[ElementIndex].style.display = "none";
  };
}

window.onload = function() {
  setDataIndex();
};

window.onclick = function(event) {
  if (event.target === modalparent[event.target.getAttribute('data-index')]) {
    modalparent[event.target.getAttribute('data-index')].style.display = "none";
  }
}

var slideIndex = 1;
var z = document.getElementsByClassName("slideshow");

for (i = 0; i < z.length; i++) {
  //set custom data attribute to first current image index
  z[i].setAttribute("data-currentslide", 1);
  showDivs(z[i].getAttribute("data-currentslide"), i);
}

function plusDivs(n, j) {
  //get custom data attribute value of current image index to slideshow class index j
  slideIndex = parseInt(z[j].getAttribute("data-currentslide")[0]);
  showDivs(slideIndex += n, j);
}

function currentDiv(n, j) {
  showDivs(slideIndex = n, j); /* showDivs Not showSlides*/
}

function showDivs(n, j) {
  var i;
  var z = document.getElementsByClassName("slideshow")[j];
  var x = z.getElementsByClassName("mySlides");
  var dots = z.getElementsByClassName("dot");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length;
  }
  //set custom data attribute to current image index
  z.setAttribute("data-currentslide", slideIndex);
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

<div class="square1"><button class="myBtn_multi"><img src="images/aj/ajppt.jpg" class="sq-pic webB" alt="ajppt" /></button></div>
<div class="modal modal_multi">
  <div class="modal-content">
    <span class="close close_multi">×</span>
    <h4>Agency Presentation</h4>
    <div class="slideshow">
      <div>
        <img class="mySlides fade" src="images/aj/Slide01.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide02.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide03.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide04.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide05.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide06.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide07.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide08.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide09.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide10.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide11.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide12.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide13.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide14.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide15.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide16.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide17.jpg" alt="ppt" />
        <img class="mySlides fade" src="images/aj/Slide18.jpg" alt="ppt" />

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

      </div>
      <br />
      <div style="text-align:center">
        <span class="dot" onclick="currentDiv(01, 0)"></span>
        <span class="dot" onclick="currentDiv(02, 0)"></span>
        <span class="dot" onclick="currentDiv(03, 0)"></span>
        <span class="dot" onclick="currentDiv(04, 0)"></span>
        <span class="dot" onclick="currentDiv(05, 0)"></span>
        <span class="dot" onclick="currentDiv(06, 0)"></span>
        <span class="dot" onclick="currentDiv(07, 0)"></span>
        <span class="dot" onclick="currentDiv(08, 0)"></span>
        <span class="dot" onclick="currentDiv(09, 0)"></span>
        <span class="dot" onclick="currentDiv(10, 0)"></span>
        <span class="dot" onclick="currentDiv(11, 0)"></span>
        <span class="dot" onclick="currentDiv(12, 0)"></span>
        <span class="dot" onclick="currentDiv(13, 0)"></span>
        <span class="dot" onclick="currentDiv(14, 0)"></span>
        <span class="dot" onclick="currentDiv(15, 0)"></span>
        <span class="dot" onclick="currentDiv(16, 0)"></span>
        <span class="dot" onclick="currentDiv(17, 0)"></span>
        <span class="dot" onclick="currentDiv(18, 0)"></span>
      </div>
    </div>
  </div>
</div>