如何使用媒体查询更改 Javascript 中的属性？

Question

我是 JS 的新手。我正在尝试将媒体查询与 Vanilla 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，媒体查询最大宽度为 750px。我试过这种方式：

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

mediaSlider(media);

media.addListener(mediaSlider);

function mediaSlider(media) {

    if(media.matches) {

        mySwiper.slidesPerView = 1;

    }

}

这种方法不起作用。请帮助我找出我错过了什么。

Answer 1

它叫addEventListener。只有 1 个事件。它被称为changelet media = window.matchMedia("(max-width: 750px)");function mediaSlider(media) {  if (media.matches) {    mySwiper.slidesPerView = 1;  }}media.addEventListener("change", mediaSlider);

Answer 2

始终建议正确阅读文档。我又犯了同样的错误。Swiper.js 提供了一个选项来添加响应式断点。为了解决这个问题，我像这样修改了我的代码。var mySwiper = new Swiper('.swiper-container', {  // Optional parameters    loop: true,    slidesPerView: 1,    spaceBetween: 30,    breakpoints: {       750: {           slidesPerView: 3,       },   },