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开始，这适合您的普通笔记本电脑/台式机。对于小于或等于（<=）960像素的屏幕，我们将slidesPerView设置为4，将spaceBetween设置为8px。然后，对于小于或等于720px的屏幕尺寸，我们将slidesPerView设置为3，将spaceBetween设置为8px。等等。

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

Answer 2

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

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

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

Answer 3

除了所有已回答的内容之外-检查此元标记：

<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 4

在Swiper 5.3.0中，其工作方式与documentation中的工作原理相同。

如果像我一样从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（）方法内部

$（document）.ready（function（）{

}）;

我把它移到外面了， 希望对某些人有同样问题的帮助

Answer 6

可能正在尝试删除＆＃39;，＆＃39;在最后一个括号之后。

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