{"title":"Adding Image Layer","id":51928,"link":"https:\/\/env.averta.net\/en\/step\/adding-image-layer\/","parent":[51827],"content":"<p>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 <code>img<\/code> element or insert the <code>img<\/code> element inside a container. The following example shows two ways of creating one. Same as other layer types, image layer will be specified by <code>ms-layer<\/code> class name and <code>data-type=\"image\"<\/code> attribute.<\/p>\n<pre class=\"lang:xhtml decode:true \">\t&lt;div id=\"masterslider\" class=\"master-slider\"&gt;\r\n\t\t&lt;div class=\"ms-slide\"&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t\t&lt;div class=\"ms-layer\" data-type=\"image\"&gt;\r\n\t\t\t\t&lt;img src=\"...\/path\/to\/layer.jpg\" alt=\"\"&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t\r\n\t\t\t&lt;img class=\"ms-layer\" data-type=\"image\" src=\"...\/path\/to\/layer.jpg\" alt=\"\"&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;!-- .... --&gt;\r\n\t&lt;\/div&gt;<\/pre>\n<h2>Preloading<\/h2>\n<p>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 <code>src<\/code> and <code>srcset<\/code> attributes are supported.<\/p>\n<pre class=\"lang:xhtml decode:true \">\t&lt;div id=\"masterslider\" class=\"master-slider\"&gt;\r\n\t\t&lt;div class=\"ms-slide\"&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t\t&lt;div class=\"ms-layer\" data-type=\"image\"&gt;\r\n\t\t\t\t&lt;img src=\"...\/path\/to\/blank.jpg\" data-src=\"...\/path\/to\/layer.jpg\" alt=\"\"&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t\r\n\t\t\t&lt;img class=\"ms-layer\" data-type=\"image\" src=\"...\/path\/to\/blank.jpg\" data-src=\"...\/path\/to\/layer.jpg\" alt=\"\"&gt;\r\n\r\n\t\t\t&lt;!-- srcset --&gt;\r\n\t\t\t&lt;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=\"\"&gt;\r\n\t\t\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;!-- .... --&gt;\r\n\t&lt;\/div&gt;<\/pre>\n<p class=\"aswi-text-box box-note\"><strong>Note: <\/strong>Since adding <code>src<\/code> 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.<\/p>\n<p>This article only describes how to create the layer. If you need more information about layers, check out the following articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/positioning-layers\/?b=51939,51939\" title=\"Positioning Layers\">Positioning layers<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/defining-animation-for-the-layers\/?b=51959,51959\" title=\"Defining Animation for the Layers\">Animating layers<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/masking-a-layer\/?b=51971,51971\" title=\"Masking a Layer\">Masking layers<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/adding-a-layer-parallax-effect\/?b=51972,51972\" title=\"Adding a Layer Parallax Effect\">Layer parallax effect<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/linking-a-layer\/?b=51973,51973\" title=\"Linking a Layer\">Linking layer<\/a><\/li>\n<\/ul>\n","type":"solution"}