Automatically changing tabs every X seconds can have several reasons.
Here are a few reasons why this could be done:
User Commitment: Periodic movement or change can draw users' attention and encourage them to interact more with the content on each tab.
Content Highlighting: If you have multiple offers or information that you want to highlight, automatically changing tabs can ensure that each item receives equal attention from visitors.
Limited space: If you have limited space on your website to display information, using tabs that change automatically can be an effective way to show more information in a small space.
Add the “tab-button” class to each of your tab-links
Add the “tabs-menu” class to your tab menu
Add this custom code to your page before the tag <body>
If you have only one tab element
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// Fix for Safariif (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 Tabsvar tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
// Connect your class names to elements.functiontabLoop() {
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>
If you use multiple tabs elements on your page
Remember to use well:
.tabs-menu-2
.tab-button-2
for your classes for your second tabs element
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// Correction pour Safari
function fixForSafari(selector) {
if (navigator.userAgent.includes("Safari")) {
document.querySelectorAll(selector).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);
}));
}
}
function tabLoop(menuSelector, btnSelector, interval) {
var tabTimeout;
clearTimeout(tabTimeout);
function loop() {
tabTimeout = setTimeout(function() {
var $next = $(menuSelector).children('.w--current:first').next();
if($next.length) {
$next.click(); // un clic de l'utilisateur réinitialise le timeout
} else {
$(btnSelector + ':first').click();
}
}, interval);
}
$(btnSelector).click(function() {
clearTimeout(tabTimeout);
loop();
});
loop();
}
// Appliquer les fonctions
fixForSafari(".tab-button");
tabLoop('.tabs-menu', '.tab-button', 5000); // 5 Secondes de rotation
// Pour le second composant
fixForSafari(".tab-button-2");
tabLoop('.tabs-menu-2', '.tab-button-2', 5000); // 5 Secondes de rotation
});
</script>
Good to know If you want to add more than two, simply duplicate the following code in the previous code and use.tabs-menu-3... and so on.
<script>
// Pour le second composant fixForSafari(".tab-button-2"); tabLoop('.tabs-menu-2', '.tab-button-2', 5000); // 5 Secondes de rotation
</script>
Change the scrolling time
All you need to do is change the delay (in milliseconds) in the code at this level:
<script>
}, 5000); // Rotation de 5 secondes
</script>
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
.avif)
