如何使用媒体查询更改 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 paginationpagination: {  el: '.swiper-pagination',  clickable: true,},// Navigation arrowsnavigation: {  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 个事件。它被称为change

let 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,

       },

   },