Page tree

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.

By adding this control to your slider you will have access to its options as described below.


This control searches for an element which has "ms-thumb" as class name in slider html then creates a list of thumbnails. 
css class name: "ms-thumb-list" 



You can create a div element with "ms-thumb" class name in each slide and use html instead of image in thumbnail list. Like following:

Code Block
<!-- 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 title it shows in thumbnail list. -->
    <div class="ms-thumb">lorem ipsum</div>
<!-- end of slide -->



NameDefault ValueDescription
autohidetrueWhether the control hides when mouse leaves the slider.
overVideotrueWhether the control visible over slide video while playing.
width100Specifies the width of each thumb in pixel.
height100Specifies the height of each thumb in pixel.
type"thumbs"Specifies the type of control, it can used as "thumbs" or "tabs".
dir"h"Specifies the direction of control. It accepts two values "h" (horizontal) and "v" (vertical)
speed17Specifies scrolling speed. It accepts float values between 0 and 100.
hideUndernullHides the control if width of slider comes less than specified.
align"bottom"Aligns the control to in or out of slider. It accepts "top", "bottom", "left" and "right" values.
hoverfalseWhether change slides on hovering over thumbs.
arrowsfalseWhether add arrows in thumblist
insetfalseWhether insert the control inside or outside of slider.
margin10Specifies the space between the control and slider in pixel.
space10Specifies the space between thumbs or tabs.


Code Block
var slider = new MasterSlider();
slider.setup('masterslider' , {width:800, height:350});
slider.control('thumblist' , {autohide:false  , dir:"v"});