Как отделить и использовать большое количество слайдеров swiper на одной странице?

Question

[Pedronin]

Как отделить и использовать большое количество слайдеров Swiper на одной странице (порядка 30) с одинаковым функционалом? Дело в том что кликая на один в действие приходят несколько но она и логично ведь классы одни и те же. Что делать ведь прописывать всё для каждого слайдера совсем не хочется а делать что-то надо.

Answer 1

[Виталий Першин]

Например так:

Comments

[Pedronin]

подскажите пожалуйста что не так, я сделал как как здесь но все равно все слайдеры листаются по клику на одну кнопку, всё дело именно в кнопках prev и next и их одинаковых классах

import Swiper, { Navigation, Pagination} from 'swiper';

Swiper.use([Navigation, Pagination]);

document.querySelectorAll('.swiper').forEach(el => {
  var swiper = new Swiper(el, {
    slidesPerView: 'auto',
  loop: true,
  centeredSlides: true,

  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: '.button-next',
    prevEl: '.button-prev',
  },
});
});

[Виталий Першин]

Pedronin, Вы не сделали так как в примере. Обратите внимание на перебор и для чего именно он нужен.

[Pedronin]

спасибо большое все что мне нужно было так это отоспаться
моя проблема была максимально проста собственно говоря как и предполагалось просто кнопки были закинуты не в того родителя с одинаковым классом и в итоге querySelector не работал
большое спасибо

Answer 2

[sharpsss]

Смотри - форичем проходиться по всем кнопкам (класс на влево вправо у всех слайдером одинаковый) далее при клике обращаешься к родительскому блоку и делаешь те действия которые тебе хочется

Comments

[Pedronin]

можете пожалуйста отметить ту строчку кода где именно этот шаг отмечен
я сделал вот так но все равно что-то не так
я вроде как обращаюсь через родителя но все равно что-то не так что? помогите пожалуйста

import Swiper, { Navigation, Pagination} from 'swiper';

Swiper.use([Navigation, Pagination]);

const swiper1 = new Swiper('.swiper1', {
  slidesPerView: 'auto',
  loop: true,
  centeredSlides: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: '.button-next',
    prevEl: '.button-prev',
  },
})

const swiper2 = new Swiper('.swiper2', {
  slidesPerView: 'auto',
  loop: true,
  centeredSlides: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: '.button-next',
    prevEl: '.button-prev',
  },
})