Slider settings - Slider size - Responsive mode - Fullpage
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
You can give a maximum width for your slides so that they don't go too wide.
- 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 tries to have the width of this element instead of the browser window's.
By default the slide/canvas where your layers are keeps the original ratio (defined by the slider size) on every device. This means that your slider can appear as 1920x1080px but the canvas can still be 1920x800px depending on the slider size. This means that you won't be able to keep your layers for instance, 10px from the top-left corner of the slider size every time, because they're aligned to the canvas and not the slider size. Turning off the constrain ratio allows the slide/canvas to lose the original ratio and have the size of the slider.
Vertical offset selectors
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
div.bottomselectors, which you can enter like this:
- Decrease slider height 3.3.0 You can write a fix px value here to decrease the slider's height width
Would you like to see some example on how the Full page responsive mode is working on real sliders? Check out these demo sliders: