Skip to end of metadata
Go to start of metadata

Each layer is specified by an element which is identified by "ms-layer" as class name. 
Since V2.1.0 you can disable swipe guesture over each layer by adding "ms-no-swipe" class name to the layer element.

On this page:

Layer custom attributes:

These parameters are supported on any type of layer.

NameDefault ValueDescription
data-type"text"Specifies the type of layer. It accepts three values "text", "image", "video".
data-offset-x0Specifies the X position of layer.
data-offset-y0Specifies the Y position of layer.
data-position"normal"Since V2.12.0
Specifies type of positioning layer over slide
  • "normal": layer is added over the slide and moves with the slide while swiping or changing.
  • "static": it's like "normal" but it doesn't accept layer effect and it is always visible over the slide.
  • "fixed": layer is added over the slider and doesn't move while swiping or changing.

(info) Fixed layers may cause the links of other types of layers to malfunction in IE.

data-origin"tl"Since V1.7.0
Specifies layer positioning origin over slide, it accepts the values below :
  • "tl": Top left
  • "tc": Top center
  • "tr": Top right
  • "ml": Middle left
  • "mc": Middle center
  • "mr": Middle right
  • "bl": Bottom left
  • "bc": Bottom center
  • "br": Bottom right
data-widthlimit-1Specifies the minimum value of the slider width which layer can be visible, under this value slider hides the layer.
data-resize"true"Whether the slider re-sizes the layer when re-sized. ("true" or "false")
data-fixed"false"Whether the slider re-positions the layer when re-sized. ("true" or "false")
data-effect"fade"Specifies layer show transition effect. More information here ( Transition In )
data-duration1000Specifies how many milliseconds a show transition effect takes to complete.
data-delay0Specifies when the show transition effect starts, in milliseconds.
data-ease"linear"Specifies the show transition effect timing method. You can find list of all functions here
data-hide-effectnullSpecifies layer hide transition effect. More info here (Transition Out )
data-hide-durationnullSpecifies how many milliseconds a hide transition effect takes to complete.
data-hide-timenullSpecifies when the hide transition effect starts, in milliseconds.
data-hide-easenullSpecifies the hide transition effect timing method. You can find list of all functions here...
data-parallax0Specifies the intensity of parallax effect, higher values makes the layer more 
data-id""Specifies a unique id to the layer, this value is used by other attirbutes like data-action.
data-maskedfalse

Since V2.50.0

This option adds a mask box over the layer. In default the box size is same as the layer dimension.

data-mask-widthnull

Since v2.50.0

Specifies the width of the layer mask in pixels.

data-mask-heightnull

Since 2.50.0

Specifies the height of the layer mask in pixels

data-waitfalse

Since V2.50.0

This option prevents the layer to show automatically, this is very useful when you want to show a layer only by layer action.

data-actionnullSince V1.7.2
Specifies the action type of layer with will be called when user clicks layer. It accepts below values: 
  1. "next": Goto next slide.
  2. "previous": Goto previous slide.
  3. "gotoSlide(slideNum)": goto specified slide (slideNum).
  4. "pause": Pause slider timer.
  5. "resume" Resume slider timer.
  6. "showLayers(layer-id-1 | layer-id-2)" show specific slide layer(s)
  7. "hideLayers(layer-id-1 | layer-id-2)" hide specific slide layer(s)
  8. "toggleLayers(layer-id-1 | layer-id-2)" toggle specific slide layer(s)

Example

<!-- new slide -->
<div class="ms-slide">
     
    <!-- slide background -->
    <img src="masterslider/blank.gif" data-src="masterslider/images/3.jpg" alt="lorem ipsum dolor sit"/>     
     
    <!-- slide text layer -->
    <div class="ms-layer ms-caption" style="top:10px; left:30px;">
        Lorem ipsum dolor sit amet
    </div>
     
    <!-- slide image layer -->
    <img class="ms-layer" alt="lorem ipsum dolor sit"
         data-offset-x      = "10"
         data-offset-y      = "15"
         data-origin        = "tr"
         data-type          = "image"
         data-widthlimit    = "600"
         data-resize        = "false"
         data-effect        = "right(90)"
         data-duration      = "800"
         data-ease          = "easeOutQuart"
      
         src="masterslider/blank.gif"
         data-src="masterslider/images/layer_img.png"
    />
     
</div>
<!-- end of slide -->

Layer types:

Text Layer / Captions

It can be defined by any type of html element such as headings (h1, h2, h3, ...), <p>, <div> and you can easily style it by css. 

(info) It's important to define a data-type = "text" attribute for the layer element.

<!-- slide text layer --><div class="ms-layer ms-caption"
     data-offset-x      = "10"
     data-offset-y      = "15"
     data-origin        = "tr"
     data-type          = "text"
     data-effect        = "bottom(90)"
     data-duration      = "800"
     data-ease          = "easeOutQuart"
 
>
 Lorem ipsum dolor sit amet
</div>

Image Layer

It's important to define a data-type = "image" attribute for the layer element

This slider supports preloading feature (It helps slider to load faster). For using this feature you need to specify the image path as "data-src" instead of "src".

.

<!-- slide image layer -->
<img class="ms-layer" alt="lorem ipsum dolor sit"
     data-offset-x      = "10"
     data-offset-y      = "15"
     data-origin        = "tr"
     data-type          = "image"
     data-effect        = "right(90)"
     data-duration      = "800"
     data-ease          = "easeOutQuart"
  
     src="masterslider/blank.gif"
     data-src="masterslider/images/layer_img.png"
/>

Button Layer

 It's important to define a data-type = "button" attribute for the layer element.

<!-- slide button layer -->
<a class="ms-layer ms-btn myCustomBtn"
     data-offset-x      = "10"
     data-offset-y      = "15"
     data-origin        = "tr"
     data-type          = "button"
     data-effect        = "right(90)"
     data-duration      = "800"
     data-ease          = "easeOutQuart"
>
    Learn More..
</a>

Video Layer

 It's important to define a data-type = "video" attribute for the layer element.

<!-- slide video layer -->
<div class="ms-layer" style="width:460px; height:259px"
     data-offset-x      = "50"
     data-offset-y      = "15"
     data-origin        = "tr"
     data-type          = "video"
     data-effect        = "bottom(90)"
     data-duration      = "800"
     data-autoplay      = "true"
     data-ease          = "easeOutQuart"
>
    <!-- this img element displays as the video cover image. It's optional you can remove it and slider will show video player. -->
    <img src="masterslider/blank.gif" data-src="masterslider/images/cover_img.jpg" alt="lorem ipsum dolor sit" />
    <iframe src="http://www.youtube.com/embed/YHWkro9-e9Q?hd=1&wmode=opaque&controls=1&showinfo=0" width="460" height="259"> </iframe>
</div>

 

Custom attributes:

NameDefault ValueDescription
data-autoplay"false"Whether auto play video or not.

(info) This Slider supports Vimeo and Youtube videos, Please note that you need to find the video embed URL for adding it into the slider. More information here.

Hotspot Layer

It's important to define a data-type = "hotspot" attribute for the layer element.

<div class="ms-layer" data-offset-x="250" data-offset-y="115" data-delay="500" data-type="hotspot" data-align="bottom">
    <div class="product-tt">
        <h3>LOREM IPSUM DOLOR</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
    </div>
</div>

Custom attributes:

NameDefault ValueDescription
data-align"bottom"Specifies the aligning position of hotspot tooltip (left, right, top and bottom).
data-stay-hover"false"Whether shows tooltip while mouse is over it.