Page tree

Versions Compared


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

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

Hide scrollbar when mouse leaves sliderIt hides scrollbar while mouse is not on slider.
Show scrollbar over Youtube/Vimeo video playerWhen switched off, hides scrollbar over Youtube/Vimeo video.
Insert scrollbar inside sliderinserts the Scrollbar inside of slider.
Scrollbar handle colorSpecifies the color for Scrollbar handle.
Align controlSpecifies the place of Scrollbar.
Scrollbar widthSpecifies the width for Scrollbar.
Scrollbar marginSpecifies the margin for Scrollbar.
Hide scrollbar under this window width It hides scrollbar under this window width.

This UI control adds a scroll bar in slider which moves when each slide changes. 
css class name: "ms-sbar"


NameDefault ValueDescription
autohidetrueWhether the control hides when mouse leaves the slider.
overVideotrueWhether the control visible over slide video while playing.
dir"h"Specifies the direction of control. It accepts two values "h" (horizontal) and "v" (vertical)
color"#3D3D3D"Specifies the color scrollbar handle color.
width4Specifies the width of scrollbar handle in pixel.
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.
insetfalseWhether insert the control inside or outside of slider.
margin10Specifies the space between the control and slider in pixel.


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