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!
I've worked with countless businesses around the world. Maybe you'll be next.
Get in Touch