Tabs Slider

Auto-rotate through Webflow tabs at custom intervals. Includes pause and progress bar options for smooth content transitions.

Copy the Tabs Slider <script> and paste into the <head> of your page

<!-- [WebTricks by CodeRaccoons] - Tabs SliderĀ -->
<script async src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/TabsSlider.min.js" ></script>
Copy Script

Required attributes

Optional
Defines the tabs component container.
Attribute to add
Name
wt-tabslider-element
Value
tabs
Instructions

Assign this attribute to the container element representing the tabs component.

How does it look?
Optional
Defines the tab buttons menu within the tabs component.
Attribute to add
Name
wt-tabslider-element
Value
menu
Instructions

Assign this attribute to the menu containing the tab buttons.

How does it look?
Optional
Defines the speed of the tabs slider in milliseconds.
Attribute to add
Name
wt-tabslider-speed
Value
5000 (default)
Instructions

Set this attribute to control the delay before sliding to the next tab.

How does it look?
Optional
Enables or disables pausing the slider on hover.
Attribute to add
Name
wt-tabslider-pauseonhover
Value
true, false (default)
Instructions

Set this attribute to 'true' to pause the slider when the mouse hovers over the tabs component.

How does it look?

Optional Attributes

No items found.

Working examples