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

Ready to learn more?

I've worked with countless businesses around the world. Maybe you'll be next.

Get in Touch