Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

By adding this control to your slider you will have access to its options as described below.

OptionDescription
 It hides thumblist/tabs while mouse is not on slider.
 When switched off, It hides thumblist/tabs over Youtube/Vimeo video.
 Inserts the thumblist/tabs inside of slider.
Thumb background fill modeSpecifies the background fill mode of thumblist/tabs.
Align controlSpecifies the place of thumblist/tabs.
Thumblist/Tabs marginSpecifies the margin for thumblist/tabs.
AppearanceChooses thumblist or tabs.
Hide thumblist/tabs under this window width It hides thumblist/tabs under this window width
Thumb/Tab widthSpecifies the width for thumblist/tabs in pixels.
Thumblist/Tabs info heightSpecifies the height for thumblist/tabs in pixels.
Space between thumbs/tabsSpecifies the the space among thumbs in thumblist mode or tabs in tab mode.

This control searches for an element which has "ms-thumb" as class name in slider html then creates a list of thumbnails. 
css class name: "ms-thumb-list" 

 

Note

You can create a div element with "ms-thumb" class name in each slide and use html instead of image in thumbnail list. Like following:

Code Block
<!-- new slide --><div class="ms-slide">
     
    <!-- slide background -->
    <img src="masterslider/blank.gif" data-src="masterslider/images/3.jpg" alt="lorem ipsum dolor sit"/>     
     
    <!-- slide text title it shows in thumbnail list. -->
    <div class="ms-thumb">lorem ipsum</div>
     
</div>
<!-- end of slide -->

 

Options:

NameDefault ValueDescription
autohidetrueWhether the control hides when mouse leaves the slider.
overVideotrueWhether the control visible over slide video while playing.
width100Specifies the width of each thumb in pixel.
height100Specifies the height of each thumb in pixel.
type"thumbs"Specifies the type of control, it can used as "thumbs" or "tabs".
dir"h"Specifies the direction of control. It accepts two values "h" (horizontal) and "v" (vertical)
speed17Specifies scrolling speed. It accepts float values between 0 and 100.
hideUndernullHides the control if width of slider comes less than specified.
align"bottom"Aligns the control to in or out of slider. It accepts "top", "bottom", "left" and "right" values.
hoverfalseWhether change slides on hovering over thumbs.
arrowsfalseWhether add arrows in thumblist
insetfalseWhether insert the control inside or outside of slider.
margin10Specifies the space between the control and slider in pixel.
space10Specifies the space between thumbs or tabs.

  

Example:
 
Code Block
var slider = new MasterSlider();
slider.setup('masterslider' , {width:800, height:350});
slider.control('bullets');
slider.control('thumblist' , {autohide:false  , dir:"v"});