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

Question

[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()

И в скобках каждый раз повторять всю эту историю про брейкпоинты и стрелки.
Как упросить вызов, но так, чтобы слайдеры (и их стрелки и пагинация) остались независимыми?

Answer 1

[0xD34F]

Конструктор поддерживает инициализацию сразу нескольких экземпляров, так что просто укажите первым параметром селектор, который будет соответствовать сразу всем пяти корневым элементам ваших слайдеров.

Comments

[HelpSophie]

Тогда если сдвинуть стрелками первый слайдер, то сдвинутся и все остальные.

[0xD34F]

брехня

[HelpSophie]

0xD34F, ага, понятно. Если стрелки внутри, то вы правы.
Но что тогда делать, если стрелки снаружи?
https://jsfiddle.net/oLywus76/

[0xD34F]

Тогда получаете список родительских элементов и map'ите их в список экземпляров swiper'а, а вместо селекторов пагинации/навигации/корня указываете конкретные элементы, которые находите внутри родительских, обернув селекторы в querySelector:

const Swipers = Array.from(document.querySelectorAll('.slider'), n => {
  return new Swiper(n.querySelector('.swiper-container'), {
    loop: true,
    navigation: {
      nextEl: n.querySelector('.swiper-button-next'),
      prevEl: n.querySelector('.swiper-button-prev'),
    },
    pagination: {
      el: n.querySelector('.swiper-pagination'),
      clickable: true,
    },
    breakpoints: {
      640: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      768: {
        slidesPerView: 4,
        spaceBetween: 40,
      },
      1024: {
        slidesPerView: 5,
        spaceBetween: 50,
      },
    },
  });
});

[HelpSophie]

0xD34F, спасибо, отлично, всё работает!