Positioning Layers

Locating layers

To locate a layer over a slide, use data-offset attribute. The attribute value can contain multiple parameters.

Parameter definition pattern

To add offset parameters, they should be added between { and } and parameter values define by param:value pattern, and like CSS, separated by ;. For example data-offset="{ x:30px; y:100px; origin:mc; }"

Offset parameters

The following example locates the layer from the center of the slider:

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- ... -->
				<div class="ms-layer"
					 data-type="text"
					 data-offset="{ origin:mc; x:100px; y:-100px; width:95px; }"
				>
					Text layer content
				</div>
			<!-- ... -->
		</div>
		<!-- ... -->
	</div>

Relocate the layer in a breakpoint

If you need to change the layer position on a breakpoint, you can set a new offset attribute with the breakpoint name. For example,?data-tablet-offset="{ origin:tl; x:100px; y: 150px;}". In the following example, the text layer relocates in the tablet and mobile devices:

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- ... -->
				<div class="ms-layer"
					 data-type="text"
					 data-offset="{ origin:mc; x:100px; y:-100px; width:95px; }"
					 data-tablet-offset="{ origin:bl; x:0; y:100px; width:100px; }"
					 data-mobile-offset="{ origin:tr; x:10px; y:10px; }"
				>
					Text layer content
				</div>
			<!-- ... -->
		</div>
		<!-- ... -->
	</div>

Important: If the offsets are not defined for smaller breakpoints, the layer considers the first defined offset for the larger breakpoint. For example when the mobile offset is not set, the tablet offset will be considered for the mobile size instead of?data-offset value.

Note: Breakpoint names are defined by breakpoint option. For more information check out Breakpoints article.

Hide layer in a breakpoint

If you need to hide a layer in a breakpoint, you can set hidden:true parameter in the offset attribute. For example,?data-tablet-offset="{hidden:true;}" hides the layer on tablet and mobile sizes.

Wrapping layers

It is optional to set the layer to wrap with the wrapper container. The wrapper container appears in the center of the slider and its max-width sets by slider width option. If your slider is boxed, the wrapper container gets the same width as the slider’s. Therefore, this will make more difference if the slide is fullscreen or fullwidth. By default, all the layers wrap by the wrapper. To disable it, you can add data-wrap="false" attribute to the layer element.

Resizing layer

Layers resize when the slider resizes by the browser window or gets smaller in a mobile device screen. You can set how a layer reacts to the slider resizing by the following attributes:

• data-resize – Disables layer resizing (data-resize="false").
• data-fixed – Let you to set the layer fixed when the slider resizes. (data-fixed="true").
• data-reset-scale – Enabling this option resets the layer scaling after each breakpoint (data-reset-scale="true").
• data-upscale – Disabling this option prevents layer to get larger that its actual size in large screen sizes. (data-upscale="false").

Layer position attribute

You can set how the layer gets position by data-position attribute. Default value is normal. Possible values are:

• normal – Slide layer moves by slide when the slide changes.
• fixed – Slide layer remains stationary when the slide changes.
• static – It is same as normal, but the static layer is not animatable. It is useful to add a content without any animation and stationary over a slide, or over the slider as an overlay layer.