Automatic tab change every X seconds in Webflow

Tools:

Introduction

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.

‍

First of all, to find out more about the Webflow Gemeos agency, do not hesitate to make an appointment by clicking here.

‍

Here's how to do it:

‍

Add a tabs element

You can add as many tabs as you want

‍

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 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>

‍

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>

‍

Publish and test the result

‍

Sandro D.

Updated on

6/7/2024

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.)