如何在不使用断点的情况下，在 Swiper React 中设置响应式断点？它能提供正确的结果吗？……由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

如何在 Swiper React 中设置响应式断点

当我们不使用断点时，它就能提供正确的结果。

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

有人在 YouTube 上问我如何在Swiper 的新 React 版本中使用断点，所以这里就来解释一下。

首先，您需要在 jsx 中设置断点：



<Swiper
  breakpoints={{
    // when window width is >= 640px
    640: {
      width: 640,
      slidesPerView: 1,
    },
    // when window width is >= 768px
    768: {
      width: 768,
      slidesPerView: 2,
    },
  }}
>
  {slides}
</Swiper>

然后，在 CSS 中添加自定义媒体查询：



.swiper-container {
  width: 480px;
}

@media screen and (min-width: 640px) {
  .swiper-container {
    width: 640px;
  }
}

@media screen and (min-width: 768px) {
  .swiper-container {
    width: 768px;
  }
}