Почему не работает код JS?

Question

[ocheretnyi_1207]

Есть слайдер с картинками:

<div class="product-cards__slider slider slider--catalog">
  <div class="slider__wrap slider__wrap--catalog">
    <div class="slider__item slider__item--active">
      <picture>
        <source media="(min-width: 1440px)" srcset="img/slider/slider-img-graf-1-desktop-1.jpg">
        <img src="img/slider/slider-img-graf-1-mobile-1.jpg" alt="Пергола Граф 1">
      </picture>
    </div>
    <div class="slider__item">
      <picture>
        <source media="(min-width: 1440px)" srcset="img/slider/slider-img-graf-1-desktop-2.jpg">
        <img src="img/slider/slider-img-graf-1-mobile-2.jpg" alt="Пергола Граф 1">
      </picture>
    </div>
    <div class="slider__item">
      <picture>
        <source media="(min-width: 1440px)" srcset="img/slider/slider-img-graf-1-desktop-3.jpg">
        <img src="img/slider/slider-img-graf-1-mobile-3.jpg" alt="Пергола Граф 1">
      </picture>
    </div>
  </div>
  <button class="slider__btn slider__btn--prev slider__btn--catalog">Предыдущий слайд</button>
  <button class="slider__btn slider__btn--next slider__btn--catalog">Следующий слайд</button>
</div>

И есть его js реализация:

const btnPrevSlide = document.querySelector(".slider__btn--prev");
const btnNextSlide = document.querySelector(".slider__btn--next");
const slides = [... document.querySelectorAll(".slider__item")];

btnNextSlide.addEventListener("click", () => {
  slides.forEach((element) => {
    element.classList.remove("slider__item--active")
  })

  slides.push(slides.shift());
  slides[0].classList.add("slider__item--active");
})

btnPrevSlide.addEventListener("click", () => {
  slides.forEach((element) => {
    element.classList.remove("slider__item--active")
  })
  slides.unshift(slides.pop());
  slides[0].classList.add("slider__item--active");
})

Этот код работает когда один слайдер на странице. Если слайдеров несколько начинается бардак.
Я попробовал переписать код таким образом, чтобы найти таргетный слайдер и его кнопку и на нем вызвать функцию смены слайдов. Но кнопка срабатывает только один раз и я не могу понять почему?

const nextSlide = (arr) => {
  arr.forEach((element) => {
    element.classList.remove("slider__item--active")
  })
  arr.push(arr.shift());
  arr[0].classList.add("slider__item--active");
}

document.addEventListener("click", (evt) => {
  const target = evt.target;
  const slider = target.parentNode

  if (target.classList.contains("slider__btn--next")) {
    nextSlide([... slider.querySelectorAll(".slider__item")])
  }
})

Comments

[Kentavr16]

const slides = [... document.querySelectorAll(".slider__item")];

а зачем вы разворачиваете это в массив?

[WbICHA]

Kentavr16, очевидно же, чтобы потом мутировать его.)

[ocheretnyi_1207]

Kentavr16,
CSS

.slider {
  position: relative;
}

.slider__wrap {
  width: 100%;
  height: 234px;
  background-color: #bdbdbd;
}
@media (min-width: 1440px) {
  .slider__wrap {
    width: 820px;
    height: 600px;
  }
}

.slider__wrap--catalog {
  width: 320px;
  height: 300px;
  margin-bottom: 7px;
}
@media (min-width: 1440px) {
  .slider__wrap--catalog {
    width: 580px;
    height: 546px;
  }
}

@media (min-width: 1440px) {
  .slider--catalog {
    width: 580px;
  }
}

.slider__item {
  display: none;
}

.slider__item--active {
  display: block;
}

.slider__btn {
  position: absolute;
  top: 103px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background-color: #2b2929;
  font-size: 0;
  line-height: 0;
}
.slider__btn:hover {
  background-color: #a5a5a5;
}
.slider__btn:active {
  background-color: #1f0109;
}
@media (min-width: 1440px) {
  .slider__btn {
    top: 263px;
    width: 50px;
    height: 50px;
  }
}

.slider__btn--prev {
  left: 14px;
}
@media (min-width: 1440px) {
  .slider__btn--prev {
    left: 25px;
  }
}
.slider__btn--prev::before {
  position: absolute;
  top: 9px;
  left: 5px;
  width: 14px;
  height: 1px;
  content: "";
  transform: rotate(149deg);
  background-color: #ffffff;
}
@media (min-width: 1440px) {
  .slider__btn--prev::before {
    top: 17px;
    left: 10px;
    width: 25px;
    height: 2px;
  }
}
.slider__btn--prev::after {
  position: absolute;
  top: 16px;
  left: 5px;
  width: 14px;
  height: 1px;
  content: "";
  transform: rotate(-149deg);
  background-color: #ffffff;
}
@media (min-width: 1440px) {
  .slider__btn--prev::after {
    top: 29px;
    left: 10px;
    width: 25px;
    height: 2px;
  }
}

.slider__btn--next {
  right: 15px;
}
@media (min-width: 1440px) {
  .slider__btn--next {
    right: 27px;
  }
}
.slider__btn--next::before {
  position: absolute;
  top: 9px;
  left: 8px;
  width: 14px;
  height: 1px;
  content: "";
  transform: rotate(31deg);
  background-color: #ffffff;
}
@media (min-width: 1440px) {
  .slider__btn--next::before {
    top: 17px;
    left: 14px;
    width: 25px;
    height: 2px;
  }
}
.slider__btn--next::after {
  position: absolute;
  top: 16px;
  left: 8px;
  width: 14px;
  height: 1px;
  content: "";
  transform: rotate(-31deg);
  background-color: #ffffff;
}
@media (min-width: 1440px) {
  .slider__btn--next::after {
    top: 29px;
    left: 14px;
    width: 25px;
    height: 2px;
  }
}

.slider__btn--catalog {
  top: 135px;
}
@media (min-width: 1440px) {
  .slider__btn--catalog {
    top: 251px;
  }
}

[Kentavr16]

WbICHA, Сударь, Ваш авторитет в моих глазах заставил меня провести некие изыскания относительно рациональности данного действия в контексте поставленной задачи. И не найдя оной рациональности в

const slides = [... document.querySelectorAll(".slider__item")];

, а тем более а дальнейших попытках мутировать его с целью судя по всему повлиять на DOM, смею с прискорбием предположить что Вы стебетесь над Вашим покорным слугой. Перчатку выслал по почте, бросьте ее себе в лицо самостоятельно. Искренне Ваш, Kentavr16

[WbICHA]

Kentavr16, но это же был стёб не над тобой, а над автором.(

Answer 1

[Kentavr16]

const nextSlide = (arr) => {
    let ind = 0;
    arr.forEach((element, index) => {
        if (element.classList.contains("slider__item--active")) {
            ind = index + 1
        }
        element.classList.remove("slider__item--active")
    })
    if (ind >= arr.length) { ind = 0 }
    arr[ind].classList.add("slider__item--active")

}

document.addEventListener("click", (evt) => {
    const target = evt.target;
    const slider = target.parentNode
    if (target.classList.contains("slider__btn--next")) {
        nextSlide([...slider.querySelectorAll(".slider__item")])
    }
})

Код не работает потому что вы проводите манипуляции с arr,который в каждом клике определяется как новый - каждый раз в итоге вы перелистываете с 1 на второй элемент.

Comments

[ocheretnyi_1207]

Спс большое за помощь!

[Kirgus]

ocheretnyi_1207, пожалуйста, отметь ответ как верный, если он помог решить проблему.

Answer 2

[Anonymous_toaster]

А он подключен?