Naming sublayers
-
To add a name to a sublayer just simply click on its default name and type the new name.
Ordering sublayers
-
You can grab any sublayer and drag it to up or down in the sublayers list. The last sublayer in the list will be above all the others inside the layer.
Basic tab
-
Type
Here you can select the type of your sublayer. It can be an image or
any other HTML element.
-
HTLM content
If you are using other than images, you can use custom HTML codes
to fill the sublayer contents.
-
Inserting videos to LayerSlider
Just simply create a DIV sublayer and paste the embed code of the video into the HTML content field. If you embed videos from YouTube or from Vimeo, LayerSlider supports autoplay videos and autopause slideshow features.
Options tab
-
Direction
The sublayer will slide in or out from / to this direction.
Possible values are: top, right, bottom, left, auto and fade.
Auto means that the sublayer will follow the direction of the layer itself.
To fade in a sublayer without sliding:
Set the Direction of the Slide in animation property of the sublayer to fade and
add a Delay time to the sublayer with the same value as the Duration (in) time of the layer in the Layer Options.
To fade out a sublayer without sliding:
Set the Direction of the Slide out animation property of the sublayer to fade and
add a Delay (out) time to the layer in the Layer Options with the same value as the Duration (out) time of this sublayer.
Sliding a sublayer from / to another direction than the layer:
You have to follow the two steps above but select the required direction instead of fade.
-
Duration
The duration of the animation when the sublayer slides or fades in or out.
You can set here how long the animation should last.
This value is in millisecs, so the value 1000 means 1 second.
Higher values results longer animations.
-
Easing
The type of the animation. You can find the possible values
and see them in action on this page.
-
Delay
Delay time before the animation starts when the sublayer
slides in or out. This value is in millisecs, so the value
1000 means 1 second. Higher values results more delayed animations.
-
P. level
The P.Level property is one of the most important setting of the parallax effect.
Sublayers with all the same properties BUT different P.Level will
animate different speed. For example a sublayer with P.Level 4 will
animate faster than other sublayer with P.Level 2 and the different
settings of P.Levels will generate the parallax effect.
-
Show until
The sublayer will be visible for the time you specify here,
then it will slides out. You can use this property for sublayers
to leave the layer before the layer itself will animates out,
or for example before other sublayers will slide in.
-
Hidden
The sublayer won't be visible in the slide if you enable
this option.
Link tab
-
URL
If you fill this field with an URL, the sublayer will be linked.
Linking a sublayer to an other layer
If you want to create a special link which will point to an other layer
in your LayerSlider, you just have to insert this field a hash or number sign (#)
followed the desired layer number.
Example: "#3" - Clicking on this sublayer will cause LayerSlider to switch to the third
layer.
-
target
Here you can set the target of the link. _self means that the link will
open in the same window / tab of the browser. _blank means that the browser will
create a new tab or window for the linked page.
Style tab
-
Top
The sublayer vertical position relative to the slide top left corner.
You can use px or percentage values. Note that percentage positioning works differently in LayerSlider, the plugin will position the sublayer into the center point to the specified position, so for example 50% means that the middle of the sublayer will be exactly in the middle of the layer.
-
Left
The sublayer horizontal position relative to the slide top left corner.
You can use px or percentage values. Note that percentage positioning works differently in LayerSlider, the plugin will position the sublayer into the center point to the specified position, so for example 50% means that the center of the sublayer will be exactly in the center of the layer.
-
Custom styles
You can apply any CSS property to your sublayer to change its look.
Important
Do NOT use margins and relative positions because in LayerSlider all sublayers have to have absolute position and 0px of margins!
Attributes tab
-
ID
HTML "id" attribute.
-
Classes
Apply any classes on your sublayer separated by a blank space.
-
Title
HTML title attribute.
-
Alt
You can set an alternate text representation for your images.
It is useful for SEO purposes.