Responsive Fullscreen Swiper

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:

Open Components and add Swiper:

Then right click the swiper component:

And add a slide:

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

Click the Add New Rule button:

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

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

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

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

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

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

Add new rule:

Select your custom CSS file:

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

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

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:

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

Select and add it:

Your image is now set for this slide:

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!

1 Like

2 posts were split to a new topic: Design panel is missing

I already made THIS PAGE for the third time and when I get to this point, the preloader stop working and if resize the window is very slow to refresh.
What am I doing wrong?

Sorry I missed something? How we put the text on the slides ?

Well, you need to set the text position to absolute and position it where you need it.

Ok, I checked the source code of the showcase. I thought this was possible in design view and add component.

1 Like

Quick Question, and it might be a stupid one. Everytime I add a background image to a slide, it applies to all my slides. Is there an option in the design panel to specify that I am only making changes local to that one slide and not globally for all slides?

Hi @whlrb
In order to have a different image in different slides, you will need to create a different class for each slide - or do this manually in the Styles panel, using #id in the CSS instead.

I ended up doing it manually. Thanks for the help.

1 Like

Hi @Teodor
How did you made the text animations?
I can’t make it work with Enter animation or in view animation.
the app structure is like this:


These are the swiper parallax options. Select your text/titles and add new dynamic attribute. Under Swiper Parallax category you will see:

Play wit the values to find the most suitable effect for you.


What does px-3 py-2 do in the slide text classes?

Also is there a way to make them in random order? Perhaps from a database?

I’m going to try and build one of these tonight and just trying to understand what’s going on.

These are bootstrap padding classes … the ones added on your element when you use the sliders for padding:
px-3 -> padding on x axis 3 i.e. padding-left 3 and padding-right 3
py-2 -> padding on y axis 2 i.e. padding-top 2 and padding-bottom 2

To make what in random order exactly?

The slides. So that it isn’t the same slide being first every time. Also, is it still possible to have a navigation header above and more content below the swiper?

Well yes, just use the randomize formatter.

So you don’t actually the swiper layout i used for this tutorial? Just add it on your page as you do usually, adding your content above and below it.

1 Like

Great, thanks! I will give it a go tonight.