Хочу добавить ещё раз слайдер но он не работает. Что может быть не так?

Question

[Zumich]

Хочу добавить ещё раз слайдер, но он не работает и не появляются кнопки на втором слайдере. И после добавления второго слайдера перестает работать первый.

<div class="slider">
              <!-- Здесь будут отображаться постеры фильмов -->
                <img src="assets/img/horimiya poster.jpg" alt="Movie Poster 1" class="movie-poster">
                <img src="assets/img/Magichbattle.jpg" alt="Movie Poster 2" class="movie-poster">
                <img src="assets/img/Lamborgini.jpg" alt="Movie Poster 2" class="movie-poster">
                <img src="assets/img/bFG5NYfODoVevfIE__daef5ba680f448333805d8445444b400.jpg" alt="Movie Poster 2" class="movie-poster">
                <img src="assets/img/aULWvyGBYqsKGiaN1qfrSKlzPHE.jpg" alt="Movie Poster 2" class="movie-poster">
                <img src="assets/img/661375314418.jpg" alt="Movie Poster 2" class="movie-poster">
                <img src="assets/img/97045.jpg" alt="Movie Poster 2" class="movie-poster">
                <img src="assets/img/img_1563455630_1372_627_it_ends.jpg" alt="Movie Poster 2" class="movie-poster">
                <!-- Добавьте постеры для других фильмов по мере необходимости -->
            </div>
          </div>
          <button class="prev-button"><img src="/assets/img/prev.svg" alt=""></button>
          <button class="next-button"><img src="/assets/img/next.svg" alt=""></button>
          </section>

          <section class="movies" id="movies2">
            <h2 class="heading">Рекомендуем посмотреть</h2>
            <p class="heading-citation">Популярные фильмы и аниме по отзывам</p>
            <!-- Movie Container -->
            <div class="slider-container">
                <div class="slider">
                  <!-- Здесь будут отображаться постеры фильмов -->
                    <img src="assets/img/horimiya poster.jpg" alt="Movie Poster 1" class="movie-poster">
                    <img src="assets/img/Magichbattle.jpg" alt="Movie Poster 2" class="movie-poster">
                    <img src="assets/img/Lamborgini.jpg" alt="Movie Poster 2" class="movie-poster">
                    <img src="assets/img/bFG5NYfODoVevfIE__daef5ba680f448333805d8445444b400.jpg" alt="Movie Poster 2" class="movie-poster">
                    <img src="assets/img/aULWvyGBYqsKGiaN1qfrSKlzPHE.jpg" alt="Movie Poster 2" class="movie-poster">
                    <img src="assets/img/661375314418.jpg" alt="Movie Poster 2" class="movie-poster">
                    <img src="assets/img/97045.jpg" alt="Movie Poster 2" class="movie-poster">
                    <img src="assets/img/img_1563455630_1372_627_it_ends.jpg" alt="Movie Poster 2" class="movie-poster">
                    <!-- Добавьте постеры для других фильмов по мере необходимости -->
                </div>
              </div>
              <button class="prev-button"><img src="/assets/img/prev.svg" alt=""></button>
              <button class="next-button"><img src="/assets/img/next.svg" alt=""></button>
              </section>

const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');

const slider2 = document.querySelector('#movies2 .slider');
const prevButton2 = document.querySelector('#movies2 .prev-button');
const nextButton2 = document.querySelector('#movies2 .next-button');

let currentIndex = 0;
const posterWidth = 207; // Ширина постера

// Рассчитываем максимально возможное смещение
const maxTranslate = (document.querySelectorAll('.slider img').length * posterWidth) - slider.clientWidth;

function updateSlider() {
  slider.style.transform = `translateX(${-currentIndex * posterWidth}px)`;
}

prevButton.addEventListener('click', () => {
  if (currentIndex > 0) {
    currentIndex -= 1;
    updateSlider();
  }
});

nextButton.addEventListener('click', () => {
  // Проверяем, не превышено ли максимальное смещение
  if (currentIndex * posterWidth < maxTranslate) {
    currentIndex += 1;
    updateSlider();
  }
});

Comments

[Александр Васильев]

делай обращение к слайдеру в цикле, тогда не будет конфликтов. Если не поможет - используй сторонние библиотеки слайдеров и также в цикле

[aex-svs]

Необходимо перебирать не только слайдера, но и кнопки/стрелки prev и next к ним, тогда не будет конфликтов. не обязательно для каждого делать отдельный класс если они по дизайну и типу одинаковые

[EvolveSunVolt]

Зачем создавать колесо заново?
Используй это