Как поменять свойства слайдера в js зависимости от размера окна?

Question

[king_aptyp]

На странице имеется слайдер. Взял один из вариантов Swiper Slider. В нем есть такой код в js:

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 4,
  spaceBetween: 20,
  freeMode: false,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

slidesPerView: 4 - это количество слайдов отображаемых на экране. Мне нужно заменить этот параметр на другой в зависимости от размер окна.

Например от 1200px-1440px - slidesPerView: 4.
От 992px-1200px - slidesPerView: 3.
От 768px-992px - slidesPerView: 2.5.
От 414px-768px - slidesPerView: 1.5.

Я знаю что можно в css менять стили при разном разрешении, но как менять параметры js не знаю, а то что нахожу в интернете не могу заставить работать.

Answer 1

[Dino Winchester]

У Swiper хорошая и богатая документация, в которой можно найти параметр Breakpoints. Так вот, через Breakpoints можно менять многие свойства Swiper, в том числе количество отображаемых слайдов.

Пример:

const swiper = new Swiper('.swiper', {
      breakpoints: {
        640: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 4,
        },
        1024: {
          slidesPerView: 5,
        },
      }
    });

Comments

[king_aptyp]

Спасибо большое, все заработало.