Adding Layer Actions

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 function as a layer action. To define a layer action, you need to add it by data-action class name.

Syntax

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

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer"
					 data-type="text"
					 data-action="hideLayer(logo, 10); next();"
			>
				Text layer content here...
			</div>
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

In the example above, when user clicks on the text layer, slider moves to next slide and hides a layer with id name logo.

Action event

You are able to change the action call event from click to any other mouse event like mouseenter. To change it, you can set the event name by data-action-on attribute. For example:?data-action-on="mouseenter"