Skip to content

Instantly share code, notes, and snippets.

@suhodolskiy
Forked from Flowbaseco/webflow-tab-rotate.js
Last active April 10, 2022 21:36
Show Gist options
  • Save suhodolskiy/8c7b18f92e59a8531c727bdfd6b51636 to your computer and use it in GitHub Desktop.
Save suhodolskiy/8c7b18f92e59a8531c727bdfd6b51636 to your computer and use it in GitHub Desktop.
<!-- Auto Rotate Webflow Tabs (Shared by @irishbuckley flowbase.co -->
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// Fix for Safari
if (navigator.userAgent.includes("Safari")) {
document.querySelectorAll(".tab-button").forEach((t)=>(t.focus=function(){const x=window.scrollX,y=window.scrollY;const f=()=>{setTimeout(()=>window.scrollTo(x,y),1);t.removeEventListener("focus",f)};t.addEventListener("focus",f);HTMLElement.prototype.focus.apply(this,arguments)}));
}
// Start Tabs
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
// Connect your class names to elements
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tabs-menu').children('.w--current:first').next();
if($next.length) {
$next.click(); // user click resets timeout
} else {
$('.tab-button:first').click();
}
}, 5000); // 5 Second Rotation
}
// Reset Loops
$('.tab-button').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment