# SSMarquee Documentation

## Basic Usage

Add the `ss-marquee` attribute to create a marquee:

Your scrolling content here

## Configuration Options [Add Attributes] [Optional]

###  Set Movement Speed in milliseconds
```html
    ss-marquee-speed="50"
```

###  Set Movement Direction (left, right)
```html
    ss-marquee-direction="left"
```

###  Set Number of Duplicates
```html
    ss-marquee-duplicates="4"
```

###  Pause on Hover
```html
    ss-marquee-pause-hover="true"
```

###  Pause When Not Visible
```html
    ss-marquee-pause-visible="true"
```


## Step-by-Step Implementation

1.  **Install the package:**

    ```
    npm install @imshaiksaif/webflow-marquee
    ```

2.  **Add the required script to your HTML:**

    ```
    <script defer src="https://cdn.jsdelivr.net/npm/@imshaiksaif/webflow-marquee@3.0.0/dist/marqueeHandler.js"></script>

    ```

3.  **Add the `ss-marquee` attribute to your HTML element:**

    ```
    <div ss-marquee>
      <div class="marquee-content">
        Your scrolling content here
      </div>
    </div>
    ```

4.  **Customize the marquee using attributes:**

    ```
    <div
      ss-marquee
      ss-marquee-speed="50"
      ss-marquee-direction="left"
      ss-marquee-duplicates="4"
      ss-marquee-pause-hover="true"
      ss-marquee-pause-visible="true"
    >
      <div class="marquee-content">
        <div class="marquee-item">Item 1</div>
        <div class="marquee-item">Item 2</div>
        <div class="marquee-item">Item 3</div>
      </div>
    </div>
    ```

5.  **Ensure the default marquee element is set to `display: flex` and `justify-content: flex-start`:**

    ```
    .marquee-content {
      display: flex;
      justify-content: flex-start;
      gap: 20px; /* Adjust gap as needed */
    }
    ```



## JavaScript API

Control marquees programmatically:

```javascript
// Get marquee instance
const element = document.querySelector('\[ss-marquee\]'); const marquee = element.ssMarquee;
// Control methods
marquee.pause(); // Pause animation
marquee.resume(); // Resume animation
marquee.start(); // Start animation
marquee.stop(); // Stop and reset
marquee.destroy(); // Remove marquee functionality

// Update configuration
marquee.update({ animation: { speed: 100, direction: 'right', gap: 30, duplicates: 4 }, behavior: { pauseOnHover: true, pauseWhenNotVisible: true } });
```