{"title":"Adding Tabs","id":52004,"link":"https:\/\/env.averta.net\/en\/step\/adding-tabs\/","parent":[51852],"content":"

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<\/code> method. Below you can find an example. It adds the control and specifies the size of tabs.<\/p>\n

<pre>\r\n  var slider = new MasterSlider();\r\n\r\n  \/\/ adds tabs control\r\n  slider.control( 'tabs', {width:300, height:80} );\r\n\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n<\/pre><\/pre>\n
Tabs options<\/h2>\n
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<\/code>?are listed below.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Option name<\/td>\nDefault value<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
autohide<\/td>\ntrue<\/td>\nWhether it hides the control upon mouse leaves the slider or not.<\/td>\n<\/tr>\n
hover<\/td>\nfalse<\/td>\nWhether the slide changes on hovering thumbnails or not.<\/td>\n<\/tr>\n
dir<\/td>\n“h”<\/td>\nThe direction of tabs appearance. Possible values are h<\/code> (horizontal) and v<\/code> (vertical).<\/td>\n<\/tr>\n
space<\/td>\n10<\/td>\nThe space between tabs points in pixels.<\/td>\n<\/tr>\n
width<\/td>\n100<\/td>\nTab width in pixels.<\/td>\n<\/tr>\n
height<\/td>\n100<\/td>\nTab height in pixels.<\/td>\n<\/tr>\n
align<\/td>\n‘bottom’<\/td>\nSpecifies how the control aligns within the slider.<\/td>\n<\/tr>\n
insertInfo<\/td>\ntrue<\/td>\nWhether it adds slide info in tab or not.<\/td>\n<\/tr>\n
insertTitle<\/td>\ntrue<\/td>\nWhether it adds slide title in the tab or not.<\/td>\n<\/tr>\n
insertThumb<\/td>\nfalse<\/td>\nWhether it adds slide thumb in the tab or not.<\/td>\n<\/tr>\n
wheel<\/td>\nfalse<\/td>\nEnables the scrolling through tabs by mouse wheel.<\/td>\n<\/tr>\n
wheelScrollSlick<\/td>\n50<\/td>\nThe speed of wheel when it scrolls to a new position. 0 disables the slick effect.<\/td>\n<\/tr>\n
wheelSpeed<\/td>\n2<\/td>\nWheel scrolling speed.<\/td>\n<\/tr>\n
wheelBounce<\/td>\nfalse<\/td>\nWhether it bounces on the edges by wheel or not.<\/td>\n<\/tr>\n
arrows<\/td>\nfalse<\/td>\nWhether it adds arrow element over the thumblist or not.<\/td>\n<\/tr>\n
speed<\/td>\n17<\/td>\nSpecifies the speed of scrolling between list items.<\/td>\n<\/tr>\n
scroll<\/td>\ntrue<\/td>\nWhether to scroll between thumbs or not.<\/td>\n<\/tr>\n
swipe<\/td>\ntrue<\/td>\nEnables the swipe gesture navigation.<\/td>\n<\/tr>\n
fitMode<\/td>\nnull<\/td>\nThe fit mode of tabs, possible values are fill<\/code>, contain<\/code>, cover<\/code>, none<\/code> and scale-down<\/code>.<\/td>\n<\/tr>\n
customClass<\/td>\nnull<\/td>\nAdds a custom class name to the control element.<\/td>\n<\/tr>\n
insertTo<\/td>\nnull<\/td>\nThe custom location in the DOM tree to add the control element. Possible value is any CSS selector string.<\/td>\n<\/tr>\n
inset<\/td>\nfalse<\/td>\nWhether to insert the control inside view container or not.<\/td>\n<\/tr>\n
margin<\/td>\n10<\/td>\nSpecifies the space amount between the control and slider’s side.<\/td>\n<\/tr>\n
hideOn<\/td>\nnull<\/td>\nHides the control on a the specified breakpoint or smaller than the given window width amount in pixels.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Defining tab<\/h2>\n
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<\/a> article.<\/p>\n","type":"solution"}