I’ve been asked on YouTube how to use breakpoints in the new react version of Swiper, so here it is.

Download Source Code

First, you have to set breakpoints in 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>

Then, add custom media queries to your 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;
  }
}

Hope this was helpful to you, don’t forget to checkout my working demo on GitHub. Leave a comment here if you have any questions. Happy coding!