Autoplaying Rotating Tabs
Here's a way to create autoplaying tabs in Webflow using JS. Autoplaying tabs allow for tabs to automatically rotate between tabs based on a time of your choosing. Keep in mind that this method uses the click method and could cause problems if you are using…
Here's a way to create autoplaying tabs in Webflow using JS. Autoplaying tabs allow for tabs to automatically rotate between tabs based on a time of your choosing. Keep in mind that this method uses the click method and could cause problems if you are using forms or other interactions that rely on mouse click functionality.
How to add it
- Update or utilize the tab-link class on the tab link element itself and tab-menu on the tab menu element that wraps the tab links.
- This can be combined with the Tab Changing interaction trigger on the tab links in order to set an animation of the element on the Tab View state. For example you could set the size of the div to go from 0 to 100% or play a lottie file from 0% to 99%
- Add the JS code snippet to the closing body tag or via an embed on the page. Update or keep relevant class names.
The code
Javascript
<script>
//-----Autoplay tab timer-----
var Webflow = Webflow || [];
Webflow.push(function() {
// Starts the tab cycle
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
// Define loop - cycle through all tabs
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tab-link').children('.tab-menu.w--current').next();
if ($next.length) {
$next.removeAttr("href").click();
// A click resets timeout, so no need for interval
} else {
$('.tab-link:first').removeAttr("href").click();
}
}, 8000); // 8 second per tab
}
// Reset timeout if a tab is clicked
$('.tab-link').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
</script>
