open-index/open-npm huggingface dataset:
npm package: @synqro/infinite-logo
Description: Create a seamless infinite scroll banner in Webflow to showcase logos or text with customizable speed, direction, and hover pause functionality.
Author: Synqro
Latest version: 1.0.4

# @synqro/infinite-logo

Create a seamless infinite scroll banner in Webflow to showcase logos or text with customizable speed, direction, and hover pause functionality.

## Installation

1. Add the following script to your Webflow project:

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

2. Create the HTML structure in Webflow

   ```html
   <div class="banner-container">
     <div class="banner-list">
       <img src="logo1.png" alt="Logo 1" />
       <img src="logo2.png" alt="Logo 2" />
       <img src="logo3.png" alt="Logo 3" />
       <!-- ... -->
     </div>
   </div>
   ```

3. Add this custom attribute to the `banner-list` div:

   | Attribute           | Value           |
   | ------------------- | --------------- |
   | sl-banner-list      | `infinite-logo` |
   | sl-banner-speed     | `30` (seconds)  |
   | sl-banner-direction | `left` `right`  |
   | sl-banner-hover     | `true` `false`  |

4. Publish your Webflow project
npm package: @synqro/tab-cycler
Description: Create an automatic rotating tab experience in Webflow.
Author: Synqro
Latest version: 1.1.1

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