00:00
Buy Me a Beer
Components

Timed Tabs

Auto-play webflow tabs elements

Auto
Rotating
Tabs

How to add auto rotating tabs to Webflow

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

1

Copy this attribute:

Copied!
vdx-tabs-timed
2

Paste the attribute to the custom attributes Name of a Tabs element

Tabs
Tab 2
Hover to stop
Tab 1
Hover to stop
Tabs
Style
Settings
Interactions
Custom Attributes
Name
vdx-tabs-timed
Value
1

Control the change interval by adding a value in milliseconds
500 = 500ms or 0.5 seconds
1000 = 1000ms or 1 second
2000 = 2000ms or 2 seconds

The default interval speed is set to 3000ms

Tabs
Style
Settings
Interactions
Custom Attributes
Name
vdx-tabs-timed
Value
3000
7

Publish

Tab 1
Hover to stop
Tab 2
Hover to stop
Tab 1
Hover to stop

How to pause auto rotating tabs on hover in Webflow

1

Copy this attribute:

Copied!
vdx-tabs-pause
2

Paste the attribute into a second custom attributes Name of a Tabs element

Tabs
Tab 2
Hover to stop
Tab 1
Hover to stop
Tab
Style
Settings
Interactions
Custom Attributes
Name
vdx-tabs-timed
Value
3000
Name
vdx-tabs-pause
Value
3

Publish

Tab 1
Hover to pause
Tab 2
Hover to pause
Tab 1
Hover to pause

How to progress bar on active rotating tabs in Webflow

1

Copy this combo class:

Copied!
vdx--active
2

Paste the class as a combo class into a style selector of your Tabs element

progress_bar
Style
Settings
Interactions
Style Selector
progress_bar
vdx--active
3

Style your combo class and give it a Transition that is the same time in ms as the Tabs rotation.

eg. Width: 100% and Transitions: 3000ms

progress_bar
Style
Settings
Interactions
Style Selector
progress_bar
vdx--active
Size
Width
100%
Height
Auto
Transitions
All: 3000ms
3

Publish

Tab 1
Hover to pause
Tab 2
Hover to pause
Tab 1
Hover to pause

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.

Think of it like buying me a pint for keeping your Webflow spells flowing.

You can support it here.

Cheers, legend!

This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.