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

Layer actions let you make layers interactive, for example you can set a layer to start the slideshow when users click on it or hides another layer when it is clicked. You can use any slider API<\/a> function as a layer action. To define a layer action, you need to add it by data-action<\/code> class name.<\/p>\n

Syntax<\/h2>\n

You can add multiple actions on one layer by separating each action with ;<\/code>. Defining actions is similar to calling a JS function but you don’t need to put string type parameters inside \"<\/code> or '<\/code> characters. For example hideLayer(logo, 10);<\/code>.<\/p>\n

\t<div id=\"masterslider\" class=\"master-slider\">\r\n\t\t<div class=\"ms-slide\">\r\n\t\t\t<!-- .... -->\r\n\t\t\t<div class=\"ms-layer\"\r\n\t\t\t\t\t data-type=\"text\"\r\n\t\t\t\t\t data-action=\"hideLayer(logo, 10); next();\"\r\n\t\t\t>\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
In the example above, when user clicks on the text layer, slider moves to next slide and hides a layer with id name logo<\/code>.<\/p>\n
Action event<\/h2>\n
You are able to change the action call event from click<\/code> to any other mouse event like mouseenter<\/code>. To change it, you can set the event name by data-action-on<\/code> attribute. For example:?data-action-on=\"mouseenter\"<\/code><\/p>\n","type":"solution"}