Swiper - Responsive Options

Original illustrated guide. Check the framework and controls shown against your project; current task guides are listed in How-to guides.

Step 1

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":

Step 2

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:

Step 3

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: