Как правильно подключить несколько одинаковых слайдеров на страницу?

Question

[Clay]

Есть несколько одинаковых слайдеров на странице
Подключены так:

let swiper= new Swiper(".swiper", {
    slidesPerView: 6,
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-btn-next',
      prevEl: '.swiper-btn-prev',
    },
    breakpoints: {
      320: {
        slidesPerView: 2,
        spaceBetween: 10
      },
      480: {
        slidesPerView: 3,
        spaceBetween: 10
      },
      970: {
        slidesPerView: 6,
        spaceBetween: 10
      }
    }
  })

Проблема в том, что при нажатии на кнопки сладится всегда один слайдер

Answer 1

[Danny Arty]

Их нужно инициализировать в цикле, а вы по сути только один:

var sliders = document.querySelectorAll('.swiper'),
    prevArrow = document.querySelectorAll('.swiper-btn-prev'),
    nextArrow = document.querySelectorAll('.swiper-btn-next');
sliders.forEach((slider, idx) => {
    let swiper = new Swiper(slider, {
        slidesPerView: 6,
        spaceBetween: 10,
        navigation: {
          nextEl: nextArrow[idx],
          prevEl: prevArrow[idx],
        },
        breakpoints: {
          320: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          480: {
            slidesPerView: 3,
            spaceBetween: 10
          },
          970: {
            slidesPerView: 6,
            spaceBetween: 10
          }
        }
      })
})