Changement de tab automatique toutes les X secondes dans Webflow

outils :

Introduction

Changer automatiquement d'onglet (tab) toutes les X secondes peut avoir plusieurs raisons.

Voici quelques raisons pour lesquelles cela pourrait être fait:

Engagement Utilisateur: Un mouvement ou un changement périodique peut attirer l'attention des utilisateurs et les encourager à interagir davantage avec le contenu de chaque onglet.
Mise en Évidence du Contenu: Si vous avez plusieurs offres ou informations que vous souhaitez mettre en avant, le changement automatique d'onglets peut s'assurer que chaque élément reçoit une attention égale de la part des visiteurs.
Espace Limité: Si vous avez un espace limité sur votre site web pour afficher des informations, utiliser des onglets avec un changement automatique peut être un moyen efficace de montrer plus d'informations dans un petit espace.

‍

Avant toute chose, pour en savoir plus sur l'agence Webflow Gemeos, n'hésitez pas à prendre un rendez-vous en cliquant ici.

‍

Voici comment faire :

‍

Ajoutez un élément tabs

Vous pouvez y ajouter autant de tab que vous le souhaitez

‍

Ajoutez la classe “tab-button” à chacune de vos tab-link

‍

Ajoutez la classe “tabs-menu” à votre tab menu

‍

Ajoutez ce custom-code dans votre page avant le tag <body>

Si vous avez un seul élément tab

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

‍

Si vous utilisez plusieurs éléments tabs dans votre page

Pensez à bien utilisé :

.tabs-menu-2
.tab-button-2

pour vos classes pour votre second élément tabs

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

Bon à savoir
Si vous souhaitez en ajouter plus de deux, il vous suffit de dupliquer le code suivant dans le code précédent et d’utiliser .tabs-menu-3… et ainsi de suite.

 <script>
// Pour le second composant		fixForSafari(".tab-button-2");		tabLoop('.tabs-menu-2', '.tab-button-2', 5000); // 5 Secondes de rotation
</script>

Modifiez la durée de défilement

Il vous suffit de modifier le délai (en millisecondes) dans le code à ce niveau :

 <script>
}, 5000); // Rotation de 5 secondes
</script>

‍

Publiez et testez le résultat

‍

Sandro D.

Mis à jour le

6/7/2024

Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)