Changement de tab automatique toutes les X secondes dans Webflow
Introduction
| Classe CSS | Élément Webflow | Rôle |
|---|---|---|
| tabs-menu | Tab Menu | Conteneur des onglets (1er composant) |
| tab-button | Tab Link | Chaque bouton d'onglet (1er composant) |
| tabs-menu-2 | Tab Menu | Conteneur des onglets (2ème composant) |
| tab-button-2 | Tab Link | Chaque bouton d'onglet (2ème composant) |
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.
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
.webp)
Ajoutez ce custom-code dans votre page avant le tag <body>
Si vous avez un seul élément tab
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
Modifiez la durée de défilement
Il vous suffit de modifier le délai (en millisecondes) dans le code à ce niveau :
Publiez et testez le résultat
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
