Slider settings - Slider size - Responsive mode - Fullpage

This responsive mode is available in the pro version only.
You can find the Size tab in here.

Interface

Behavior

Your slider will have 100% width and the height of your screen.

It's really hard to make a slider's layers with the Full page responsive mode to behave responsively, so check out this documentation before starting to work on your layers!

Responsive - Full page

Slide width

You can give a maximum width for your slides so that they don't go too wide.

Move to slider
  • User interaction - Your screen will scroll to the slider first when the user wants to switch between the slides, and he can switch only after that. 
  • Autoplay - If the autoplay option is turned on for this slider, it will bring the slider first into screen every time the autoplay switches the slider. 
Force full width

Originally your slider can be only as wide as the container it is in, but with this option you can force it to go outside its containers, and make it as wide as your screen is. This option has limitations, so it won't work in every case, and you will have to put your slider into your template or theme.

Adjust slider width to parent selector

You can specify the CSS selector of one of the slider's parent elements and the slider will try to have the width of this element instead of the browser window's. You can see here, how to figure out what CSS selector you need.

Slider height based on

With the Real height by default from the slider's height we are removing the url bar of browsers when the slider is inserted on top of the page. This way the slider's bottom part would be really on the bottom of the screen, not lower. 
This isn't good in all cases, like if you are inserting the slider into a fixed position to be your background, then you will want the slider to have the actual height of the browser including the url bar. With the CSS 100vh option your slider's height would be exactly as big as the browser's height is.

Constrain ratio

Smart Slider 3 allows your layers to be positioned on the slide canvas (regarless of which slide editing mode you're using). This slide canvas can either keep or lose the original ratio which is based on the slider size. The default setting is off, which means the canvas can lose the default ratio. This allows you to keep your layers, e.g. 10px from the top-left corner of the slider everytime, because the canvas has the same size as the slider.

Let's see a few simple examples to understand this setting better. You have a full page slider and the slider size is set to 1200x500px. See how the results change on an iPhone 6.

Constrain ratio Original slider size Device resolution Current slider size Current canvas size
ON 1200x500px 375x667px 375x667px 375x156px
OFF 1200x500px 375x667px 375x667px 375x667px
Decrease slider height

The Full page sliders are as high as the screen is, but most people want them with smaller height, to keep for example their top menu before the slider. You can achieve that with these features.

  • By Constant: You can write a fix px value here to decrease the slider's height width
  • By CSS selectors With this option you can give the HTML selectors (separated with commas) of those parts of your website, what you would like to remove from the screen height calculation. You can see here how to look for code parts in your website. Example usecase for the header and div.bottom selectors, which you can enter like this:
    header,div.bottom
    	

    You can use global selectors, or set specific selectors for the current slider only.

Demo sliders

Would you like to see some example on how the Full page responsive mode is working on real sliders? Check out these demo sliders: