# @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:

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

2. Create your tab structure in Webflow:

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