Adding Slide Info

You can use this control to show slide information content beside the slider it can align to vertically or horizontally around the slider. Each slide can have a different info content which appears in slide info control when the slide get selected. Below snippet shows a sample JS setup containing slide info control.

<pre>
  var slider = new MasterSlider();

  // adds slide info control
  slider.control( 'slideinfo', {width:300, insertTitle:false} );

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

Like the example above, you need to setup the control in slider by using slider.control method.

Slide info options

The Slider control method has two arguments, first specifies the name of UI control and the second argument is an object of control options. The list of supported options for slideinfo are listed below.

Option name	Default value	Description
autohide	true	Whether it hides the control upon mouse leaves the slider or not.
width	100	The slide info width size.
matchHeight	false	Whether match slide info height with slider height size or not. This option only affective if the `align` option sets `right` or `left`.
align	‘bottom’	Specifies how the control aligns with the slider.
insertInfo	true	Whether it adds slide info in slide info or not.
insertTitle	true	Whether it adds slide title in the slide info or not.
insertThumb	false	Whether it adds slide thumb in the slide info or not.
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.
insert	false	Whether to insert the control inside 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.Defining thumbnail.

Defining slide info

To set a slide info for a slide you need to add the content as slide data. For more information check Slide data article.