Swiper - Responsive Options

You can customize the Swiper component to show different number of slides on different screen sizes. Also you can customize the spacing between slides.
We added a Swiper with slides containing images and set the effect to “Slide”:

Scroll down the properties panel and you will see the Slides View options. There are 5 icons available for different screen sizes: (default, phone, tablet, laptop and desktop).
The default option is applied to all, until you override any of the options for bigger screen sizes. So we leave the default to show 1 slide at time, without any spacing between slides:

We want the same option applied for phones, so we jump directly to tablet size. We set spacing of 5px between the slides and show 2 slides:

For laptop size the spacing is 10px and we show 4 slides:

Then for big desktop screens - spacing 15 and show 5 slides:

And you are done. You can see the results:


WapplerPrevious   WapplerNext


Community Page
Last updated: