DEV Community

Cover image for How to Set Responsive Breakpoints in Swiper React
Timo Ernst
Timo Ernst

Posted on • Updated on • Originally published at


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:

    // when window width is >= 640px
    640: {
      width: 640,
      slidesPerView: 1,
    // when window width is >= 768px
    768: {
      width: 768,
      slidesPerView: 2,
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!



YouTube Channel

Top comments (6)

aminda profile image

its helpfull

timo_ernst profile image
Timo Ernst

You‘re very welcome 😊

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.....


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

ahmadsawalqeh profile image
Ahmad Sawalqeh

Thanks a lot Timo, you really made my day

euhansarkar profile image
Euhan Sarkar

thank you so much ernst

temirfe profile image

This is for React, how about core?

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout 😆