{"title":"Adding Circle Timer","id":52096,"link":"https:\/\/env.averta.net\/en\/step\/adding-circle-timer\/","parent":[51852],"content":"<p>This UI control adds a circle that indicates how much is passed from the slideshow delay. You need to enable <a href=\"https:\/\/env.averta.net\/en\/step\/enabling-autoplay\/?b=51999,51999\" title=\"Enabling Autoplay\">autoplay<\/a> option in slider to see this UI control in action. Below you can find an example.<\/p>\n<pre class=\"lang:xhtml decode:true \">  var slider = new MasterSlider();\r\n\r\n  \/\/ adds circletimer control\r\n  slider.control( 'circletimer', {autohide: false} );\r\n\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    autoPlay: true,\r\n    \/\/ other options ...\r\n  });<\/pre>\n<h2>Circle timer 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>circletimer<\/code> is added in following.<\/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>stroke<\/td>\n<td>10<\/td>\n<td>Specifies the stroke amount of circle in pixels.<\/td>\n<\/tr>\n<tr>\n<td>radius<\/td>\n<td>5<\/td>\n<td>The circle radius in pixels.<\/td>\n<\/tr>\n<tr>\n<td>color<\/td>\n<td>&#8216;#A2A2A2&#8217;<\/td>\n<td>Specifies the color of circle.<\/td>\n<\/tr>\n<tr>\n<td>align<\/td>\n<td>&#8216;top&#8217;<\/td>\n<td>Specifies how the control aligns with the slider.<\/td>\n<\/tr>\n<tr>\n<td>autohide<\/td>\n<td>false<\/td>\n<td>Whether it hides the control upon mouse leaves the slider.<\/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 view container or not.<\/td>\n<\/tr>\n<tr>\n<td>margin<\/td>\n<td>30<\/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 a the specified breakpoint or smaller than the given window width amount in pixels.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","type":"solution"}