Timo Ernst

Posted on Aug 15, 2020 • Edited on Oct 9, 2020 • Originally published at timo-ernst.net

How to Set Responsive Breakpoints in Swiper React

#responsive #carousel #react #swiper

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

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!

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

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

YouTube Channel
http://www.timoernst.tv