Adding layers

The layers can be used to add both animated and static content to the slides. They can contain any content type: simple text, HTML content, and even videos.

If you have used older versions of this slider, you know that only captions or inline HTML were supported prior to version 4. Now, you can replace both the captions and inline HTML with layers.

Each layer can be customized individually by setting a specific position, size, transition and style.

Layers can be animated or static. They will be animated by default and you can make them static by passing them the 'static' class. Static layers will not fade in only after the transition is over, as animated layers, but will be visible inside the slide from the start.

The code example below shows you several ways in which the layers can be customized and what type of content you could add. First, when you create a layer, you must pass the 'layer' class to it. Then, you can give it several other classes for styling. Also, in order to customize the size, position and transition of the layer, you will use some of the predefined data attributes. The tables below contain a presentation of all the available settings.

<div class="advanced-slider" id="my-slider">    
<div class="slides">
<div class="slide"> <img class="image" src="../images/slides/image1.jpg" alt=""/> <div class="layer black" data-transition="left" data-offset="100" data-easing="easeOutElastic"> First layer </div> <div class="layer white rounded" data-vertical="center" data-horizontal="center"> Some content for the second layer </div> <div class="layer black static" data-width="30%" data-height="auto" data-horizontal="right" > Third layer </div> </div> <div class="slide"> <div class="layer static" data-horizontal="100" data-vertical="100"> <a class="video" href="http://www.youtube.com/watch?v=8qGa5rIOB28&rel=1"> <img src="../path/to/image.jpg' width="400" height="300" /> </a> </div> <div class="layer static custom-class" data-width="200" data-horizontal="550" data-vertical="100" > Some description for the video </div> </div> <div class="slide"> <div class="layer black static" data-width="100%" data-height="100%" > <iframe src="http://www.youtube.com/embed/EW8QtEDi2Pk?enablejsapi=1&wmode=opaque" width="100%" height="100%" frameborder="0"></iframe> </div> </div>

</div>
</div>

Predefined styles

Class nameDescription
static Makes the layout static.
black Makes the layout background black.
white Makes the layout background white.
rounded Makes the corners of the layout's background rounded.

Transition, Size and Position

Setting nameDefault valueDescription
Transition
data-transition 'fade' Sets the direction of the layer's slide in transition. Available values are: 'left', 'right', 'up' and 'down'. If 'left' is used, the layer will slide in from right to left. If 'up' is used, the layer will slide in from bottom to top. If the setting is not used, the layer will fade in.
data-offset 50 Sets an offset for the transition.
data-duration 400 Sets the duration of the transition.
data-delay 0 Sets the delay of the transition.
data-easing 'swing' Sets the easing type of the transition.
Position
data-position topLeft Sets the reference point for the layer's position. Can be set to 'topLeft', 'topRight', 'bottomLeft' or 'bottomRight'.
data-horizontal 0 Sets the horizontal position of the layer. Can be set to 'left', 'center', 'right', a percentage value, or a fixed value. This value will be relative to the reference point set for the data-position attribute.
data-vertical 0 Sets the vertical position of the layer. Can be set to 'top', 'center', 'bottom', a percentage value, or a fixed value. This value will be relative to the reference point set for the data-position attribute.
Size
data-width 'auto' Sets the width of the layer. Can be set to 'auto', a percentage value, or a fixed value.
data-height 'auto' Sets the height of the layer. Can be set to 'auto', a percentage value, or a fixed value.
data-depth   Sets the depth (z-index) of the layer.
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk