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.

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
Modify 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.

  • Decrease slider height with the height of the matching elements (CSS selector) 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
    	

  • Decrease slider height 3.3.0 You can write a fix px value here to decrease the slider's height width
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: