How to Set Responsive Breakpoints in Swiper React

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!