Adding Image Layer

To insert an image as a layer over the slider, you can use this layer type. To create an image layer, you can define it by an img element or insert the img element inside a container. The following example shows two ways of creating one. Same as other layer types, image layer will be specified by ms-layer class name and data-type="image" attribute.

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer" data-type="image">
				<img src=".../path/to/layer.jpg" alt="">
			</div>
			
			<img class="ms-layer" data-type="image" src=".../path/to/layer.jpg" alt="">
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

Preloading

If you wish to set image layer to be loaded by the slider loader, you need to set the image path as data attribute. Both src and srcset attributes are supported.

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- .... -->
			<div class="ms-layer" data-type="image">
				<img src=".../path/to/blank.jpg" data-src=".../path/to/layer.jpg" alt="">
			</div>
			
			<img class="ms-layer" data-type="image" src=".../path/to/blank.jpg" data-src=".../path/to/layer.jpg" alt="">

			<!-- srcset -->
			<img class="ms-layer" data-type="image" src="...path/to/blank.gif" data-src="..path/to/original-image.jpg" data-srcset="..path/to/custom-image1.jpg 200w, ..path/to/custom-image2.jpg 900w" alt="">
		
			<!-- .... -->
		</div>
		<!-- .... -->
	</div>

Note: Since adding src attribute is mandatory, it is recommended to set a path to a blank image like the example. You can find a blank.gif example in the download package.

This article only describes how to create the layer. If you need more information about layers, check out the following articles: