@synqro/tab-cycler

Create an automatic rotating tab experience in Webflow (or any site) with customizable timing, optional disabling of clicks, and external link support.

Installation

1. Add the following script to your Webflow project:

   <script src="https://cdn.jsdelivr.net/npm/@synqro/tab-cycler@1/dist/index.min.js"></script>

2. Create your tab structure in Webflow:

   <div class="w-tabs" sl-tab-list>
     <a class="w-tab-link w--current" data-w-tab="Tab 1">Tab 1</a>
     <a class="w-tab-link" data-w-tab="Tab 2" sl-tab-click="none"
       >Tab 2 (disable)</a
     >
     <a class="w-tab-link" data-w-tab="Tab 3">Tab 3</a>
   </div>

3. Add or adjust these custom attributes to control behavior:

   | Attribute | Value | Description | | -------------- | ------------------------- | -------------------------------------------- | | sl-tab-list | | Activate the tab cycler | | sl-tab-timer | 5 (seconds) | Time between tab change (default: 5 seconds) | | sl-tab-click | none or http(s)://... | Disable tab clicks or link to external URL | | sl-tab-target | blank or self | Open external link in new tab or same tab | | sl-tab-loading | | Animate 0% to 100% loading bar |

4. Publish your Webflow project