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媒体声明和/或离子的人)。

​

​

问题出在鳄鱼符号上。他们走错了路。它们应该显示为'//当窗口宽度<=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。诸若此类。

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

Answer 2

除了所有已应答的-检查此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

原样不变。一旦这为我解决了问题。(我曾经有过这样的经历：<meta name="viewport" content="width=device-width, initial-scale=1.0"**>**和Siwper的断点不起作用。更新上面的代码已经解决了这个问题。)

Answer 3

我也遇到了同样的问题，删除以下几行代码就解决了这个问题：

slidesPerView: 5,
slidesPerColumn: 2,
spaceBetween: 30,

事实证明，它们覆盖了断点值。