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
Top comments (9)
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 ..
thansk
its helpfull
You‘re very welcome 😊
Thanks a lot Timo, you really made my day
Thanks for your article sir, this is very helpfully
Thank you
very helpfull
This is for React, how about core?
thank you so much ernst
Thanks its working and helpful.