This UI control lets you add a list of thumbnails in horizontal or vertical direction to the slider. To add a thumblist to your slider you need to set it by control method. Below you can find an example that adds the control and specifies the size of thumbnails.
<pre>
var slider = new MasterSlider();
// adds thumbnails control
slider.control( 'thumbnails', {width:120, height:80} );
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
</pre>
Thumbnails 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 thumbnails?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 thumbnails appearance. Possible values are h (horizontal) and v (vertical). |
| space | 10 | The space between thumbnails points in pixels. |
| width | 100 | Thumbnail width in pixels |
| height | 100 | Thumbnail height in pixels |
| align | ‘bottom’ | Specifies how the control aligns with the slider. |
| wheel | false | Enables the scrolling through thumbnails 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 thumbnails. |
| scroll | true | Whether to scroll between thumbs or not. |
| swipe | true | Enables the swipe gesture navigation. |
| fitMode | null | The fit mode of thumbnails,. 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. |
| insert | 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 the specified breakpoint or makes the given window width amount smaller in pixels. |
Defining thumbnail
To set a thumblist for a slide you need to add the thumbnail image as a child element of slide element. For more information check out Slide data article.