时间戳

首页 > 解决方案 > 如何使用媒体查询更改 Javascript 中的属性？

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

问题描述

我是 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，媒体查询最大宽度为 750 像素。我试过这样：

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

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

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

谢谢

标签： javascript

解决方案

始终建议正确阅读文档。我又犯了同样的错误。Swiper.js 提供了添加响应断点的选项。我像这样修改了我的代码以解决问题。

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

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

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

推荐阅读