HelpSophie
@HelpSophie

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

Есть инициализация слайдера с брейкпоинтами

var swiper = new Swiper('.clients', {
  slidesPerView: 1,
  spaceBetween: 10,
  // init: false,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    //el: '.swiper-scrollbar',
  },

  breakpoints: {
    640: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    768: {
      slidesPerView: 4,
      spaceBetween: 40,
    },
    1024: {
      slidesPerView: 5,
      spaceBetween: 50,
    },
  }
});


Но слайдеров 5 и приходится писать

var swiper = new Swiper()
var swiper2 = new Swiper()
...
var swiperN = new Swiper()

И в скобках каждый раз повторять всю эту историю про брейкпоинты и стрелки.
Как упросить вызов, но так, чтобы слайдеры (и их стрелки и пагинация) остались независимыми?
  • Вопрос задан
  • 857 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Конструктор поддерживает инициализацию сразу нескольких экземпляров, так что просто укажите первым параметром селектор, который будет соответствовать сразу всем пяти корневым элементам ваших слайдеров.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы