Перезапустите цикл в функции с прослушивателем событий внутри той же функции.

Question

Чего я пытаюсь достичь с помощью своего рода ползунка: при переходе к следующему img и достижении цикла последний элемент перезапускается с 0, при переходе к предыдущему img, и нет элемента до того, как он возьмет последний, и т.д.

Теперь это работает, но после нескольких щелчков мыши происходит сбой, и мне приходится обновлять страницу.

Кто-то может помочь?

Я знаю, что в этом фрагменте кода что-то ужасно неправильно, но я не могу понять замыкания.

Вот код

const btn_prev = document.getElementById("btn_prev");
const btn_next = document.getElementById("btn_next");
let toPrev;
let toNext;

const slider = () => {
  const arrImg = Array.from(document.querySelectorAll(".sli_cont img"));
  const arrImgLength = arrImg.length;

  let curr;
  let prev;
  let next;

  for (let i = 0; i < arrImgLength; i++) {
    if (arrImg[i].classList.contains("current")) {
      curr = arrImg[i];

      if (i === 0) {
        prev = arrImg[arrImgLength - 1];
        next = arrImg[i + 1];
      } else if (i == arrImgLength - 1) {
        next = arrImg[0];
        prev = arrImg[i - 1];
      } else {
        prev = arrImg[i - 1];
        next = arrImg[i + 1];
      }

      prev.classList.add("prev");
      next.classList.add("next");
    }
  }

  btn_prev.addEventListener("click", function() {
    prev.classList.remove("prev");
    next.classList.remove("next");
    curr.classList.remove("current");
    prev.classList.add("current");

    slider();
  });

  btn_next.addEventListener("click", function() {
    prev.classList.remove("prev");
    next.classList.remove("next");
    curr.classList.remove("current");
    next.classList.add("current");

    slider();
  });




};

slider();

body {
  overflow: hidden;
}

.sli_cont {
  width: 100vw;
  position: relative;
}

img {
  width: 50vw;
  height: auto;
  position: absolute;
  left: -200vw;
}

.prev {
  left: -25vw;
}

.current {
  left: 25vw;
  z-index: 1;
}

.next {
  left: 75vw;
}

.btn {
  font-size: 30px;
  color: red;
  position: absolute;
  display: inline;
  padding: 1rem;
  background-color: #fff;
  cursor: pointer;
}

#btn_prev {
  top: 100px;
  left: 0;
}

#btn_next {
  top: 100px;
  right: 0;
}

<div class="sli_cont">
  <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/242ce817-97a3-48fe-9acd-b1bf97930b01/09-posterization-opt.jpg">
  <img src="https://s.hswstatic.com/gif/giant-panda-bear-pictures3.jpg">
  <img class="current" src="https://cloud.lovindublin.com/images/_relatedEntryImage2x/cosmic-castle.png?mtime=20160907180855">
  <img src="https://ichef.bbci.co.uk/news/976/cpsprodpb/D81C/production/_100542355_46333730-bad3-4c72-af16-3c4aba9c1164.jpg">
  <img src="https://i0.wp.com/pulptastic.com/wp-content/uploads/2014/12/cute-reptiles-107__700.jpg">
  <div class="btn" id="btn_prev">-</div>
  <div class="btn" id="btn_next">+</div>
</div>