{"title":"Adding Bullets","id":52001,"link":"https:\/\/env.averta.net\/en\/step\/adding-bullets\/","parent":[51852],"content":"<p>To add bullets UI control to the slider you need to set it by <code>control<\/code> method. Below you can find an example that adds the bullets control and sets <code>space<\/code> to <code>15<\/code> to increase the space between each bullet point.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;pre&gt;\r\n  var slider = new MasterSlider();\r\n\r\n  \/\/ adds bullets control\r\n  slider.control( 'bullets', {space:15} );\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>Bullets 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>bullets<\/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>autohide<\/td>\n<td>true<\/td>\n<td>Whether it hides the control upon mouse leaves the slider.<\/td>\n<\/tr>\n<tr>\n<td>dir<\/td>\n<td>&#8220;h&#8221;<\/td>\n<td>The direction of bullets appearance. Possible values are <code>h<\/code> (horizontal) and <code>v<\/code> (vertical).<\/td>\n<\/tr>\n<tr>\n<td>align<\/td>\n<td>&#8216;bottom&#8217;<\/td>\n<td>Specifies how the control aligns within the slider.<\/td>\n<\/tr>\n<tr>\n<td>space<\/td>\n<td>10<\/td>\n<td>The space between bullet points in pixels.<\/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>true<\/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"}