This UI control lets you add a list of tabs in horizontal or vertical direction beside the slider. To add it to the slider you need to set it by control method. Below you can find an example. It adds the control and specifies the size of tabs.
<pre>
var slider = new MasterSlider();
// adds tabs control
slider.control( 'tabs', {width:300, height:80} );
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
</pre>
Tabs 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 tabs?are listed below.
| Option name | Default value | Description |
| autohide | true | Whether it hides the control upon mouse leaves the slider or not. |
| hover | false | Whether the slide changes on hovering thumbnails or not. |
| dir | “h” | The direction of tabs appearance. Possible values are h (horizontal) and v (vertical). |
| space | 10 | The space between tabs points in pixels. |
| width | 100 | Tab width in pixels. |
| height | 100 | Tab height in pixels. |
| align | ‘bottom’ | Specifies how the control aligns within the slider. |
| insertInfo | true | Whether it adds slide info in tab or not. |
| insertTitle | true | Whether it adds slide title in the tab or not. |
| insertThumb | false | Whether it adds slide thumb in the tab or not. |
| wheel | false | Enables the scrolling through tabs by mouse wheel. |
| wheelScrollSlick | 50 | The speed of wheel when it scrolls to a new position. 0 disables the slick effect. |
| wheelSpeed | 2 | Wheel scrolling speed. |
| wheelBounce | false | Whether it bounces on the edges by wheel or not. |
| arrows | false | Whether it adds arrow element over the thumblist or not. |
| speed | 17 | Specifies the speed of scrolling between list items. |
| scroll | true | Whether to scroll between thumbs or not. |
| swipe | true | Enables the swipe gesture navigation. |
| fitMode | null | The fit mode of tabs, possible values are fill, contain, cover, none and scale-down. |
| 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 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 smaller than the given window width amount in pixels. |
Defining tab
To set tabs for a slide you need to add the tab contents as child element of slide element. For more information check out Slide data article.