{"title":"Adding Arrows","id":52000,"link":"https:\/\/env.averta.net\/en\/step\/adding-arrows\/","parent":[51852],"content":"<p>To add arrows UI control to the slider, you need to set it by <code>control<\/code> method. The example below adds the arrows control and sets <code>autohide<\/code> to false in order to prevent it hiding when mouse leaves the slider area.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;pre&gt;\r\n  var slider = new MasterSlider();\r\n\r\n  \/\/ adds arrows control\r\n  slider.control( 'arrows', {autohide: false} );\r\n\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n&lt;\/pre&gt;<\/pre>\n<h2>Arrows options<\/h2>\n<p>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 <code>arrows<\/code> are listed below:<\/p>\n<table>\n<thead>\n<tr>\n<td>Option name<\/td>\n<td>Default value<\/td>\n<td>Description<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>dir<\/td>\n<td>&#8216;h&#8217;<\/td>\n<td>Specifies the direction of arrows. <code>h<\/code> aligns arrows to right and left and <code>v<\/code> aligns them to top and bottom.<\/td>\n<\/tr>\n<tr>\n<td>autohide<\/td>\n<td>true<\/td>\n<td>Whether it hides the control upon mouse leaves the slider or not.<\/td>\n<\/tr>\n<tr>\n<td>customClass<\/td>\n<td>null<\/td>\n<td>Adds a custom class name to the control element.<\/td>\n<\/tr>\n<tr>\n<td>insertTo<\/td>\n<td>null<\/td>\n<td>The custom location in the DOM tree to add the control element. Possible value is any CSS selector string.<\/td>\n<\/tr>\n<tr>\n<td>inset<\/td>\n<td>false<\/td>\n<td>Whether it inserts the control inside the view container or not.<\/td>\n<\/tr>\n<tr>\n<td>margin<\/td>\n<td>10<\/td>\n<td>Specifies the space amount between the control and slider&#8217;s side.<\/td>\n<\/tr>\n<tr>\n<td>hideOn<\/td>\n<td>null<\/td>\n<td>Hides the control on the specified breakpoint or makes the given window width amount smaller in pixels.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","type":"solution"}