Auto-Rotate Tabs

Simple
Auto-Rotate Tabs

Add this custom code to the </body> custom code section in your project settings:

<script>
var Webflow = Webflow || [];
Webflow.push(function () {

var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();

function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tabs-list').children('.w--current:first').next();
if($next.length) {
if ($(".menu-button").hasClass("w--open")) {
tabLoop();
}else{
$next.removeAttr("href").click();
}
} else {
if ($(".menu-button").hasClass("w--open")){
tabLoop();
}else{
$('.tab-text-box:first').removeAttr("href").click();
}
}
}, 5000); // 5 seconds
}

$('.tab-text-box').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
</script>

You'll want to change everything in bold, that is the classes used for the tab list (in my case .tabs-list), for the individual tabs (.tab-text-box), and the element you use for the menu button (.menu-button, this just fixes an issue on mobile).

After you've done this you can set the time it takes to change between divs, which is currently set at five seconds, and you're done!

Download Assets
See an Example Website

Other Code Snippets

Learn How to Turn More Website Traffic into Customers in Just 5 Days

Trusted by hundreds of businesses around the world.

Nice! You're in the loop. Talk soon.
Oops! Something went wrong while submitting the form.