Layout

Here you can define all the settings which are related for how the slider behave on your site, its dimensions, etc.

The slider settings section contains hidden options which can be displayed separately. The main goal is to remove clutter from the user interface, since these options control overly specific features, or they meant to be used by experienced users. You can display these options with the switch on the upper right corner. These parameters will be marked similarly, as this text in the whole documentation.

To specify the layout of the LayerSlider you can select from 4 options. All of them will described below within their additional parameters.

• Fixed size
• Responsive
• Full width
• Full size

The Allow full screen mode option is available for all types. If you enable that you will be able to watch the slider in full screen, if you double-click on that.

Fixed size

With this option your slider will keep the sizes what you set below. So in case of small screens the slider won't fit to the screen size, just keep its width and height. This can be recommended for banners, or small sliders.

Responsive

Responsive mode will keep the desired width and height until it is possible. So if you are using a device which resolution is smaller than the slider's dimension, that the slider will be resized, as well as all elements on that, so it will fit for all screen sizes.

With Max-width option you are able to set an amount at wich the slider won't be wider.

Full width

As you can see on the layout preview, the slider will fully fill up the available width of your site.

Responsive under option will turn the full-width slider into responsive one under the specified with.

The Fit to screen width parameter will restrict the slider width to the viewport width.

Full size

Full size mode will show your slider in full page mode, so the slider will fit on full screen on any device.

Layers' container height option is similar for the container width in full-width mode, but refers for the slider's height. If the slider will be larger than that amount, the items will be aligned vertically centered. When you click into this field you will see the read dashed lines appear in the preview image to show where how this container behaves when you use it similarly to the width option.

The Reduce height is also an important parameter. It can be useful, if you have for example a top menu bar on the site, and you would like that the slider appears under that. So practically this will means that the slider will be full-screen size, but its height will be reduced with the height of your menu bar. To achieve that use CSS selectors in this fields. If you would like to add more elements, just separate them by commas.

The Mode parameter is the point of the Full size parameter. It has 3 options, which will refer to the slider behavior. With Normal mode the slider will fill up the whole screen, on mobiles and large desktops as well. Here scene option will recognize if there is a header bar or anythnig else above the slider, and will reduce its width with that element height. This is useful, if you have a top menu bar. The last Fit to parent height option will set the slider height to fill up its container element, so if that has a height set by CSS, then your slider will have the same. Please note when this option is selected the Fit to screen width option won't work.

The Fit to screen width parameter will restrict the slider width to the viewport width.

Other settings

The Maximum responsive ratio parameter means that the slider will not enlarge your layers above the target ratio. The value 1 will keep your layers in their initial size, without any upscaling.

Move the slider by will replace the slider into a the different part of the page by providing a jQuery DOM manipulation method & selector for the target destination.

The Clip slide transition choose on which axis (if any) you want to clip the overflowing content (i.e. that breaks outside of the slider bounds).