UI • v1.7.0

@synqro/tab-cycler

Auto-rotating Webflow tabs with progress bar and external links.

Built for Webflow's native tab component. Auto-cycles through tabs on a timer, pauses when out of viewport, supports a progress bar, and can redirect to external URLs on click.

Install • Paste in 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
Add the script to your Webflow project. Go to Project Settings → Custom Code → Footer Code and paste the snippet above.
2
Add the custom attributes to the relevant elements in the Webflow designer — see the table below.
3
Publish your site. The script initializes automatically on DOMContentLoaded.

Configuration

Select the element in the Webflow designer and add these custom attributes under the Element Settings panel.

Attribute	Value	Description
Required	`(empty)`	Activate the tab cycler on the Webflow tabs wrapper.
	`5`	Seconds between tab changes. Default: 5.
	`none \| https://… \| /path`	On a tab header: disable the click or redirect to a URL. On any other element inside the tabs (e.g. a button in a tab pane): turn it into a link. Absolute (https://…) and relative (/expertises/…, #anchor) URLs both work.
	`blank \| self`	Open the link in a new tab or the same tab. Default: external URLs → new tab, internal/relative links → same tab.
	`(empty) \| vertical`	Animate a 0% → 100% loading bar. Animates width by default; set the value to vertical to animate height instead. Can live inside the tab or inside its matching .w-tab-pane (auto-linked by data-w-tab).
	`tab name (data-w-tab)`	Link a loading bar to a tab from anywhere on the page. Set it to the tab's data-w-tab value. Pair it with sl-tab-loading on the same element.

Examples

Auto-cycling tabs with progress bar

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>

Tab that redirects to an external URL

HTML

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

Link on a button inside a tab pane

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>

React to tab changes (custom events)

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

Use Webflow's native Tabs component — the script hooks into .w-tab-link.
Pauses automatically when scrolled out of the viewport.
sl-tab-click with a URL works on any element inside the tabs — not just the tab headers. Drop it on a button in a tab pane to make it a link.
sl-tab-loading="vertical" makes the progress bar fill top-to-bottom (animates height) instead of left-to-right.
A loading bar can live inside the tab, inside its matching pane (auto-linked by data-w-tab), or anywhere via sl-tab-loading-for. One tab can drive several bars at once — e.g. a vertical bar on desktop and a horizontal bar on mobile.
Extension point — the script fires bubbling sl-tab-active / sl-tab-inactive events (detail: tab, pane, container, index). Listen on document to hook your own logic, e.g. postMessage into an iframe in the pane. sl-tab-active fires in a rAF, after the pane is revealed.
sl-tab-active fires on every relaunch, staying in sync with the loading bar: init, auto-cycle, clicking another tab AND re-clicking the active tab, plus scrolling the tabs back into view. sl-tab-inactive fires when switching away or scrolling out of view.