Adding Scroll Indicator

Scroll indicator shows the location of the slider progress between the slides, by adding a rectangle over the slider. It moves when user swipes between slides.

<pre>
  var slider = new MasterSlider();

  // adds timebar control
  slider.control( 'scrollbar', {align: 'bottom'} );

  slider.setup( 'headerSlider', {
    width: 900,
    height: 700,
    autoPlay: true,
    // other options ...
  });
</pre>

Like the example above, you need to setup the control in slider by using slider.control method.

Scroll indicator options

The slider control method has two arguments. The first argument specifies the name of UI control and the second one is an object of control options. The list of supported options for scrollbar are listed below.

Option name	Default value	Description
thickness	4	Specifies the thickness of the scroll in pixels.
color	‘#3D3D3D’	Specifies the color of the scroll.
dir	“h”	The direction of bullets appearance, possible values are `h` (horizontal) and `v` (vertical).
align	‘top’	Specifies how the control aligns with the slider.
autohide	false	Whether it hides the control upon mouse leaves the slider or not.
customClass	null	Adds a custom class name to the control element.
insertTo	null	The custom location in the DOM tree to add the control element. Possible value is any CSS selector string.
insert	true	Whether to insert the control inside view container or not.
margin	10	Specifies the space amount between the control and slider’s side.
hideOn	null	Hides the control on a the specified breakpoint or makes the given window width amount in pixels.