Adding Arrows

To add arrows UI control to the slider, you need to set it by control method. The example below adds the arrows control and sets autohide to false in order to prevent it hiding when mouse leaves the slider area.

<pre>
  var slider = new MasterSlider();

  // adds arrows control
  slider.control( 'arrows', {autohide: false} );

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

Arrows 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 supported options for arrows are listed below:

Option name	Default value	Description
dir	‘h’	Specifies the direction of arrows. `h` aligns arrows to right and left and `v` aligns them to top and bottom.
autohide	true	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.
inset	false	Whether it inserts the control inside the view container or not.
margin	10	Specifies the space amount between the control and slider’s side.
hideOn	null	Hides the control on the specified breakpoint or makes the given window width amount smaller in pixels.