{"title":"Adding Slide Info","id":52022,"link":"https:\/\/env.averta.net\/en\/step\/adding-slide-info\/","parent":[51852],"content":"<p>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.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;pre&gt;\r\n  var slider = new MasterSlider();\r\n\r\n  \/\/ adds slide info control\r\n  slider.control( 'slideinfo', {width:300, insertTitle: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<p>Like the example above, you need to setup the control in slider by using <code>slider.control<\/code> method.<\/p>\n<h2>Slide info options<\/h2>\n<p>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 <code>slideinfo<\/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 or not.<\/td>\n<\/tr>\n<tr>\n<td>width<\/td>\n<td>100<\/td>\n<td>The slide info width size.<\/td>\n<\/tr>\n<tr>\n<td>matchHeight<\/td>\n<td>false<\/td>\n<td>Whether match slide info height with slider height size or not. This option only affective if the <code>align<\/code> option sets <code>right<\/code> or <code>left<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>align<\/td>\n<td>&#8216;bottom&#8217;<\/td>\n<td>Specifies how the control aligns with the slider.<\/td>\n<\/tr>\n<tr>\n<td>insertInfo<\/td>\n<td>true<\/td>\n<td>Whether it adds slide info in slide info or not.<\/td>\n<\/tr>\n<tr>\n<td>insertTitle<\/td>\n<td>true<\/td>\n<td>Whether it adds slide title in the slide info or not.<\/td>\n<\/tr>\n<tr>\n<td>insertThumb<\/td>\n<td>false<\/td>\n<td>Whether it adds slide thumb in the slide info 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>insert<\/td>\n<td>false<\/td>\n<td>Whether to insert the control inside 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.Defining thumbnail.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Defining slide info<\/h2>\n<p>To set a slide info for a slide you need to add the content as slide data. For more information check <a href=\"https:\/\/env.averta.net\/en\/step\/adding-data\/?b=51926,51926\" title=\"Adding Data\">Slide data<\/a> article.<\/p>\n","type":"solution"}