javascript - 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 的人)。

问题是鳄鱼符号。他们走错了路。他们应该读作“//when window width is <=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
    },
    ...
  }
}

因此，我们从默认的 slidesPerView 5 和 spaceBetween 的 10px 开始，这适合您的普通笔记本电脑/台式机。对于小于或等于 (<=) 960px 的屏幕尺寸，我们将 slidesPerView 设置为 4，将 spaceBetween 设置为 8px。然后对于小于或等于 720px 的屏幕尺寸，我们将 slidesPerView 设置为 3，将 spaceBetween 设置为 8px。等等。

因为事情被错误地倒退了，所以我们倒退工作，具有讽刺意味的是，事实证明这更直观。