{"title":"Adding Overlay Layer","id":51958,"link":"https:\/\/env.averta.net\/en\/step\/adding-overlay-layer\/","parent":[51827],"content":"

Overlay layers let you add layer over the slider. These type of layers remain on top of all other slides and layers while user moves between slides. You can show or hide them by Layer actions<\/a> or set each layer to appear only when specific slide(s) is selected. Additionally, overlay layers support a new type of animation that animates the layer to a new state, based on the selected slide.<\/p>\n

Defining overlay layers<\/h2>\n

To define layers as overlay ones, you need to add them inside a container with ms-overlay-layers<\/code> class name. This container should be added as the direct child of the slider element and it is recommended to add it before slides. The following example adds a text layer as an overlay layer to the slider.<\/p>\n

\t<div id=\"masterslider\" class=\"master-slider\">\r\n\t\t<div class=\"ms-overlay-layers\">\r\n\t\t\t<!-- .... -->\r\n\t\t\t<div class=\"ms-layer\" data-type=\"text\">\r\n\t\t\t\tOverlay text layer content here...\r\n\t\t\t<\/div>\r\n\t\t\t<!-- .... -->\r\n\t\t<\/div>\r\n\t\t<div class=\"ms-slide\">\r\n\t\t\t<!-- .... -->\r\n\t\t\t<div class=\"ms-layer\" data-type=\"text\">\r\n\t\t\t\tText layer content here...\r\n\t\t\t<\/div>\r\n\t\t\t<!-- .... -->\r\n\t\t<\/div>\r\n\t\t<!-- .... -->\r\n\t<\/div><\/pre>\n
Layer attributes<\/h2>\n
Overlay layers have some additional attributes to let you control them over the slider like showing or hiding them relative to the selected slide in the slider. Here you can find the list of these attributes:<\/p>\n