Adding Bullets

To add bullets UI control to the slider you need to set it by control method. Below you can find an example that adds the bullets control and sets space to 15 to increase the space between each bullet point.

<pre>
  var slider = new MasterSlider();

  // adds bullets control
  slider.control( 'bullets', {space:15} );

  slider.setup( 'headerSlider', {
    width: 900,
    height: 700,
    // other options ...
  });
</pre>

Bullets 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 supported options for bullets?are listed below.

Option name	Default value	Description
autohide	true	Whether it hides the control upon mouse leaves the slider.
dir	“h”	The direction of bullets appearance. Possible values are `h` (horizontal) and `v` (vertical).
align	‘bottom’	Specifies how the control aligns within the slider.
space	10	The space between bullet points in pixels.
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.
inset	true	Whether it inserts the control inside the 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.