UI • v1.7.0

@synqro/tab-cycler

Tabs Webflow qui s'enchaînent automatiquement, avec barre de progression et liens externes.

Conçu pour le composant Tabs natif de Webflow. Cycle automatiquement sur un timer, met en pause hors viewport, supporte une barre de progression et peut rediriger vers des URLs externes au clic.

Install • À coller dans Project Settings → Custom Code → Footer

HTML

<!-- [Synqro Labs] Tab Cycler -->
<script src="https://cdn.jsdelivr.net/npm/@synqro/tab-cycler@1/dist/index.min.js"></script>

Installation

1
Ajoute le script à ton projet Webflow. Va dans Project Settings → Custom Code → Footer Code et colle le snippet ci-dessus.
2
Ajoute les custom attributes sur les éléments concernés dans le Designer Webflow — voir le tableau ci-dessous.
3
Publie ton site. Le script s'initialise automatiquement au DOMContentLoaded.

Configuration

Sélectionne l'élément dans le Designer Webflow et ajoute ces custom attributes dans le panneau Element Settings.

Attribute	Value	Description
Required	`(empty)`	Active le tab cycler sur le wrapper de tabs Webflow.
	`5`	Secondes entre chaque changement. Par défaut : 5.
	`none \| https://… \| /path`	Sur un onglet : désactive le clic ou redirige vers une URL. Sur n'importe quel autre élément à l'intérieur des tabs (ex. un bouton dans un volet) : le transforme en lien. Les URLs absolues (https://…) et relatives (/expertises/…, #ancre) fonctionnent.
	`blank \| self`	Ouvre le lien dans un nouvel onglet ou le même. Par défaut : URL externe → nouvel onglet, lien interne/relatif → même onglet.
	`(empty) \| vertical`	Anime une barre de chargement de 0% à 100%. Anime la largeur par défaut ; mets la valeur vertical pour animer la hauteur. Peut être dans l'onglet ou dans son .w-tab-pane (lié automatiquement via data-w-tab).
	`tab name (data-w-tab)`	Lie une barre de chargement à un onglet depuis n'importe où sur la page. Mets la valeur du data-w-tab de l'onglet. À combiner avec sl-tab-loading sur le même élément.

Exemples

Onglets auto-cycle avec barre de progression

HTML

<div class="w-tabs" sl-tab-list sl-tab-timer="7">
    <a class="w-tab-link w--current" data-w-tab="Tab 1">
        Tab 1
        <div sl-tab-loading class="loading-bar"></div>
    </a>
    <a class="w-tab-link" data-w-tab="Tab 2">Tab 2</a>
    <a class="w-tab-link" data-w-tab="Tab 3">Tab 3</a>
</div>

Onglet qui redirige vers une URL externe

HTML

<a class="w-tab-link"
    data-w-tab="External"
    sl-tab-click="https://synqro.co"
    sl-tab-target="blank"
>
    External link
</a>

Lien sur un bouton à l'intérieur d'un volet

HTML

<div class="w-tab-pane" data-w-tab="Tab 1">
    <p>Some content…</p>
    <a class="button"
        sl-tab-click="https://synqro.co"
        sl-tab-target="blank"
    >
        Learn more
    </a>
</div>

Réagir aux changements d'onglet (events custom)

HTML

<script>
// Fired on init, auto-cycle and click. detail = { tab, pane, container, index }
document.addEventListener("sl-tab-active", (e) => {
    const iframe = e.detail.pane && e.detail.pane.querySelector("iframe");
    if (iframe && iframe.contentWindow) {
        iframe.contentWindow.postMessage("sl-tab-active", "*");
    }
});
document.addEventListener("sl-tab-inactive", (e) => {
    // e.detail.tab just became inactive
});
</script>

Tips

Utilise le composant Tabs natif de Webflow — le script se branche sur .w-tab-link.
Se met en pause automatiquement quand scrollé hors du viewport.
sl-tab-click avec une URL fonctionne sur n'importe quel élément à l'intérieur des tabs — pas seulement les onglets. Mets-le sur un bouton dans un volet pour en faire un lien.
sl-tab-loading="vertical" fait remplir la barre de haut en bas (anime la hauteur) au lieu de gauche à droite.
Une barre peut être dans l'onglet, dans son pane (liée automatiquement via data-w-tab), ou n'importe où via sl-tab-loading-for. Un même onglet peut piloter plusieurs barres — ex. une verticale sur desktop et une horizontale sur mobile.
Point d'extension — le script émet des events sl-tab-active / sl-tab-inactive (bubbling, detail : tab, pane, container, index). Écoute-les sur document pour brancher ta propre logique, ex. postMessage vers une iframe dans le pane. sl-tab-active est émis dans un rAF, une fois le pane affiché.
sl-tab-active se déclenche à chaque relance, en phase avec la barre de chargement : init, auto-cycle, clic sur un autre onglet ET re-clic sur l'onglet actif, plus le retour dans le viewport au scroll. sl-tab-inactive se déclenche au changement d'onglet ou quand on scrolle hors de vue.