Discuss

Responsive Fullscreen Swiper

On this page

In this tutorial we will show you how to create a fullscreen Swiper, similar to the one we created in THIS SHOWCASE. This will require us to add 4 lines of CSS through the Styles panel, but everything is really easy even for beginners.

We start with a blank page, as we don't want anything else on the page. Right click App:

Screenshot_3|690x379

Open Components and add Swiper:

Screenshot_4|690x379

Then right click the swiper component:

Screenshot_5|690x379

And add a slide:

Screenshot_6|690x379

That's enough for us to apply the custom styles we need. Select the Swiper component (1) and open the Styles panel (2):

Screenshot_7|690x379

Click the Add New Rule button:

Screenshot_8|690x379

We select to create a custom CSS file, as we don't have one included on the page:

Screenshot_10|690x379

Browse to the folder, where you want to store it, add a name for the custom CSS file and save it:

Screenshot_11|690x379

You will see the new selector added and waiting for some rules:

Screenshot_12|690x379

You need to add the following rule there height: 100vh - this will make the Swiper take 100% of the height of viewport:

Screenshot_13|690x379

We are done with styling the Swiper container. Now let's switch back to App Structure:

Screenshot_14|690x379

Select the swiper slide (1) and click the Styles panel (2) so we can add some styles to the swiper slides:

Screenshot_15|690x379

Add new rule:

Screenshot_16|690x379

Select your custom CSS file:

Screenshot_17|690x379

Add the following rules to the div.swiper-slide selector which is added there:

background-size: cover;
background-repeat: no-repeat;
background-position: center;

Screenshot_18|690x379

We are done with customizing the Swiper and Swiper Slides. No more CSS rules are needed, now the Swiper is taking 100% height and 100% width of the screen. Also the Slides images will always be fullscreen and centered.

What we need to do now, should be done separately for each of your slides. I.e. - we need to add an image in each slide. The images will be set as background images, so just switch to Design panel:

Screenshot_19|690x379

Under Background, click the browse icon to select a background image:

Screenshot_20|690x379

Select and add it:

Screenshot_21|690x379

Your image is now set for this slide:

Screenshot_22|690x379

Add as many slides as you wish, and add a background image for each of them. Setup the Swiper effects, paging and controls and you are done!