javascript - idangero Swiper响应断点不起作用

嗨，我正在我正在使用的网站上使用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
 }
},
});

任何想法，我要去哪里错了

最佳答案

当前，文档的内容令人困惑，这就是为什么我认为很多人都遇到问题(尤其是那些处理sass媒体声明和/或ionic的人)的原因。



问题是鳄鱼符号。他们是错误的方法。当窗口宽度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和10px的spaceBetween开始，这适合您的普通笔记本电脑/台式机。对于小于或等于(slidesPerView设置为4，并将spaceBetween设置为8px。然后，对于小于或等于720px的屏幕尺寸，我们将slidesPerView设置为3，并将spaceBetween设置为8px。等等。

因为事情被错误地向后退，所以我们向后工作，讽刺的是事实证明这更加直观。