Инициализация нескольких swiper slider

183

06 февраля 2022, 10:00

на странице есть четыре слайдера, инициализирую как два разных slider1 и slider2. Слайдеры под классом slider1 и slider2 по два слайдера в каждом классе, для синхронной работы. Проблема с пагинацией, когда добавляю второй слайдер с классом slider2, то везде пагинация становится одинаковой. Подскажите, в чем может быть причина.

Answer 1

Нужно добавить разные классы для swiper-container:

HTML:

  <div class="swiper-container swiper1">
    ...
       </div>

 <div class="swiper-container swiper2">
    ...
       </div>

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

var swiper = new Swiper('.swiper1', {
    slidesPerView: 'auto',
    centeredSlides: true,
    spaceBetween: 15,
    initialSlide: 4,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  var mySwiper = new Swiper('.swiper2', {
  direction: 'horizontal',
  loop: true,
  effect:'fade',
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  },
autoplay: {
  delay: 4000,
  disableOnInteraction: false
},
fadeEffect: {
  crossFade: true
},
});

Читайте подробнее API на сайте, там все написано.