Блог

Я новичок в JS. Я пытаюсь использовать медиа-запросы с помощью ванильного JavaScript. Я пытаюсь создать слайдер для своей веб-страницы. Я использую Swiper.js . Это мой JS-код:

 var mySwiper = new Swiper('.swiper-container', {
 
// Optional parameters
   loop: true,
   slidesPerView: 3,
   spaceBetween: 30,

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

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

Я хочу изменить значение slidesPerView свойства на 1 с максимальной шириной медиа-запроса 750 пикселей. Я пробовал этот способ:

 var media = window.matchMedia("(max-width: 750px)");
mediaSlider(media);
media.addListener(mediaSlider);

function mediaSlider(media) {
    if(media.matches) {
        mySwiper.slidesPerView = 1;
    }
}
 

Этот метод не работает. Пожалуйста, помогите мне выяснить, где я что-то пропустил.

Спасибо

его вызывается addEventListener . Существует только 1 событие. Его называют change

 let media = window.matchMedia("(max-width: 750px)");

function mediaSlider(media) {
  if (media.matches) {
    mySwiper.slidesPerView = 1;
  }
}

media.addEventListener("change", mediaSlider);
 

Всегда рекомендуется правильно прочитать документацию. Я снова допустил ту же ошибку. Swiper.js предоставляет возможность добавлять адаптивные точки останова. Я изменил свой код следующим образом, чтобы разобраться с этим.

 var mySwiper = new Swiper('.swiper-container', {

  // Optional parameters
    loop: true,
    slidesPerView: 1,
    spaceBetween: 30,

    breakpoints: {
       750: {
           slidesPerView: 3,
       },
   },