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
    },
    ...
  }
}

因此，我们从默认的

slidesPerView

5 和

spaceBetween

10px 开始，这适合您的普通笔记本电脑/台式机。对于小于或等于 (<=) 960px, we set

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,

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

Answer 4

在 Swiper 5.3.0 中，它的工作方式与文档中一样。

如果您像我一样从 4.x 升级，则可能需要更新您的配置。

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

Answer 5

就我而言，问题是声明位于ready()方法内部

$(文档).ready(function() {

});

我把它搬到外面了， 我希望这可以帮助一些有同样问题的人

Answer 6

就我而言，所有解决方案都不起作用，但以下解决方案有效......

  // Swiper
  const swiper = new Swiper(".swiper", {
    // slidesPerView: 6
    centeredSlides: true,
    grabCursor: true,
    breakpoints: {
      320: {
        slidesPerView: 2,
        spaceBetween: 50,
      },
      375: {
        slidesPerView: 2,
        spaceBetween: 0,
      },
      1024: {
        slidesPerView: 6,
        spaceBetween: 0,
      },
    },
  });

大于 1024 个屏幕从 320 个断点拍摄 2 张幻灯片，我从第一个配置级别删除了默认的 SlidesPerView 以将其放入断点。

Answer 7

我遇到了同样的问题，并删除了右括号之前的最后一个逗号。

breakpoints: {
 530: {
  slidesPerView: 1,
  spaceBetween: 5
},

Answer 8

聚会迟到了，但几年后我在断点方面遇到了类似的问题。对我有用的是在每个断点中重复“slidesPerView”声明。出于某种原因，如果我将该属性保留在断点对象之外，“slidesPerView”属性将恢复到第一个声明，该声明始终为“1” ' 滑动。希望这对某人有帮助。

Answer 9

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

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