• Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy
Averta Support Center
  • Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy

Looking for the answer

Adding Time-bar


Time-bar adds a progressing bar to the slider which indicates the slideshow time. You need to enable slideshow option in the slider to see this UI control in action. Below you can find an example.

  var slider = new MasterSlider();

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

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

Time bar options

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

Option name Default value Description
thickness 4 Specifies the thickness of the time bar in pixels.
color ‘#3D3D3D’ Specifies the color of the time bar.
dir “h” Chooses the direction of timer. Possible values are h (horizontal) and v (vertical).
align ‘bottom’ Specifies how the control aligns within the slider.
autohide false Whether it hides the control upon mouse leaves the slider 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.
inset true Whether to insert the control inside view container or not.
margin 0 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

Was this information helpful?

Submit
Wizard Home
Related articles list
Create New Support Ticket
Copyright © 2017 Averta. All rights reserved.