Adding Circle Timer

This UI control adds a circle that indicates how much is passed from the slideshow delay. You need to enable autoplay option in slider to see this UI control in action. Below you can find an example.

  var slider = new MasterSlider();

  // adds circletimer control
  slider.control( 'circletimer', {autohide: false} );

  slider.setup( 'headerSlider', {
    width: 900,
    height: 700,
    autoPlay: true,
    // other options ...
  });

Circle timer 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 circletimer is added in following.

Option name	Default value	Description
stroke	10	Specifies the stroke amount of circle in pixels.
radius	5	The circle radius in pixels.
color	‘#A2A2A2’	Specifies the color of circle.
align	‘top’	Specifies how the control aligns with the slider.
autohide	false	Whether it hides the control upon mouse leaves the slider.
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 view container or not.
margin	30	Specifies the space amount between the control and slider’s side.
hideOn	null	Hides the control on a the specified breakpoint or smaller than the given window width amount in pixels.