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. |