Adding Overlay Layer

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 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.

Defining overlay layers

To define layers as overlay ones, you need to add them inside a container with ms-overlay-layers 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.

	<div id="masterslider" class="master-slider">
		<div class="ms-overlay-layers">
			<!-- .... -->
			<div class="ms-layer" data-type="text">
				Overlay text layer content here...
			</div>
			<!-- .... -->
		</div>
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer" data-type="text">
				Text layer content here...
			</div>
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

Layer attributes

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:

• data-show-on – The list of slide ids which the layer shows over them.
• data-hide-on – The list of slide ids which the layer hides over them.

Note: Adding both data-show-on and data-hide-on attributes to one single layer is not recommended.[/textlayer]

You can customize showing and hiding layer animations by data-animation-in and data-animation-out attributes. You can find detailed information about creating animations in this article.

In the following example, the overlay layer only shows over second slide.

	<div id="masterslider" class="master-slider">
		<div class="ms-overlay-layers">
			<!-- .... -->
			<div class="ms-layer" data-type="text" data-show-on="slide-2">
				Overlay text layer content here...
			</div>
			<!-- .... -->
		</div>
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer" data-type="text">
				Text layer content here...
			</div>
			<!-- .... -->
		</div>		
		<div class="ms-slide" data-id="slide-2">
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

Animation

Overlay layer supports a different type of animating, you can set multiple animation relative to active slide’s number. For example, the layer can first appear over the first slide, then animates to a new state upon sliding to the second slide. To define these animations you need to add the slide relevant animation by the slide number as a data attribute to the layer element. For example,?data-animation-slide-1 defines the initial animation over the first slide. The following example creates an overlay layer with two animation states over slide one and slide two.

	<div id="masterslider" class="master-slider">
		<div class="ms-overlay-layers">
			<!-- .... -->
			<div 
				class="ms-layer" 
				data-type="text"
				data-animation-slide-1 = "{ from:true; duration:2; opacity:0; x:-100 }"
				data-animation-slide-2 = "{ duration:1.5; x:200 }"
			>
				Overlay text layer content here...
			</div>
			<!-- .... -->
		</div>
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer" data-type="text">
				Text layer content here...
			</div>
			<!-- .... -->
		</div>		
		<div class="ms-slide" data-id="slide-2">
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

Recommended:

Defining overlay layer animation is the same as layer animation in/out. To find more information, check out this article.