DEV Community

loading...
Cover image for How to Set Responsive Breakpoints in Swiper React

How to Set Responsive Breakpoints in Swiper React

Timo Ernst
YouTube ➩ http://www.timoernst.tv
Originally published at timo-ernst.net Updated on ・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Twitter
https://www.twitter.com/timo_ernst

Blog
https://www.timo-ernst.net

YouTube Channel
http://www.timoernst.tv

Discussion (4)

Collapse
webcodebit profile image
webcodebit • Edited

when we resizeing a browser then it provide this result at the end of the result,code of the slide.....

dev-to-uploads.s3.amazonaws.com/i/...

Code

dev-to-uploads.s3.amazonaws.com/i/...

when we are not using breakpoints then it provides proper result ..

Collapse
ahmadsawalqeh profile image
Ahmad Sawalqeh

Thanks a lot Timo, you really made my day

Collapse
aminda profile image
amin-da

thansk
its helpfull

Collapse
timo_ernst profile image
Timo Ernst Author

You‘re very welcome 😊