idangero Swiper 响应断点不起作用

Question

嗨，我正在我正在做的网站上使用 iDangero Swiper，但由于某种原因，我无法让响应式断点工作。下面是我正在使用的js。

var swiper = new Swiper('.s1', {
 slidesPerView: 5,
 slidesPerColumn: 2,
 spaceBetween: 30,
 nextButton: '.swiper-button-next',
 prevButton: '.swiper-button-prev',
 breakpoints: {
  1024: {
   slidesPerView: 5,
   spaceBetween: 30
  },
  768: {
   slidesPerView: 1,
   spaceBetween: 10
  },
  640: {
   slidesPerView: 1,
   spaceBetween: 10
 },
 320: {
  slidesPerView: 1,
  spaceBetween: 10
 }
},
});

我出错的任何想法

Answer 1

目前，文档的内容令人困惑，这就是为什么我认为很多人都遇到了问题（尤其是那些使用 sass 媒体声明和/或 ionic 的人）。

问题是鳄鱼符号。他们走错了路。他们应该读作“ //当窗口宽度<=320px ”。因此，该方法是从默认选项（例如slidesPerView，spaceBetween等）向后工作。

例如：

{
  ...
  slidesPerView: 5,
  spaceBetween: 10,
  breakpoints: {
    ...
    960: {
      slidesPerView: 4,
      spaceBetween: 8
    },
    720: {
      slidesPerView: 3,
      spaceBetween: 6
    },
    540: {
      slidesPerView: 2,
      spaceBetween: 4
    },
    320: {
      slidesPerView: 1,
      spaceBetween: 2
    },
    ...
  }
}

所以我们从默认值slidesPerView5 和spaceBetween10px 开始，这适合您的普通笔记本电脑/台式机。对于小于或等于 (<=) 960px 的屏幕尺寸，我们设置slidesPerView为 4 和spaceBetween8px。然后对于小于或等于720px 的屏幕尺寸，我们设置slidesPerView为 3 和spaceBetween8px。等等。

因为事情错误地向后，我们向后工作，具有讽刺意味的是，结果更直观。

Answer 2

可能正在尝试删除最后一个括号后的“，”。

...    
320: {
      slidesPerView: 1,
      spaceBetween: 10
     }
    }
    });