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. |