### AlpineJS Component Slider NPM Setup

Source: https://context7.com/fylgja/snap-slider/llms.txt

Illustrates how to set up the Fylgja Snap Slider AlpineJS plugin when using NPM. This involves importing AlpineJS and the snap-slider plugin, registering the plugin, and starting AlpineJS.

```javascript
// NPM Installation with AlpineJS
import Alpine from 'alpinejs';
import snapSlider from '@fylgja/snap-slider/alpine';

window.Alpine = Alpine;
Alpine.plugin(snapSlider);
Alpine.start();
```

--------------------------------

### Install Snap Slider via NPM

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Installs the Fylgja Snap Slider package using npm. This is the recommended method for integrating into modern JavaScript projects.

```sh
npm install @fylgja/snap-slider
```

--------------------------------

### Initialize, Destroy, and Refresh Snap Slider

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Demonstrates the core methods for managing the Snap Slider's lifecycle. 'init()' starts the slider (usually automatic), 'destroy()' cleans up event listeners, and 'refreshSlides()' is for dynamic content changes.

```javascript
// Assuming snapSliderInstance is obtained as shown above

snapSliderInstance.init(); // Typically called automatically
snapSliderInstance.destroy();
snapSliderInstance.refreshSlides();
```

--------------------------------

### Alpine.js Snap Slider Directive

Source: https://github.com/fylgja/snap-slider/blob/main/alpinejs.html

This example demonstrates how to initialize the x-snap-slider Alpine.js plugin. It shows the basic integration by adding the 'x-snap-slider' directive to a scrollable container. Ensure the Alpine.js library is included in your project.

```html
<div x-snap-slider>
    <!-- Your scrollable content here -->
</div>

<script src="//unpkg.com/@fylgja/snap-slider/dist/alpine.min.js" defer></script>
```

--------------------------------

### JavaScript API for Slider Instance Access

Source: https://context7.com/fylgja/snap-slider/llms.txt

Provides examples of how to obtain the SnapSlider class instance from both standard custom elements and Alpine.js components. It includes a check to ensure the slider has initialized correctly, outputting to the console.

```javascript
// For Custom Element
const snapSliderElement = document.querySelector('snap-slider');
const sliderInstance = snapSliderElement.slider;

// For AlpineJS Component
const alpineSliderElement = document.querySelector('[x-snap-slider]');
const sliderInstance = alpineSliderElement.snapSlider;

// Check if slider initialized successfully
if (sliderInstance) {
  console.log('Slider initialized with', sliderInstance.slides.length, 'slides');
} else {
  console.error('Slider failed to initialize - check for [data-track] element');
}
```

--------------------------------

### JavaScript API - Event Handling

Source: https://context7.com/fylgja/snap-slider/llms.txt

This section details how to subscribe to the `slideChange` event to react to viewport changes and update the UI based on the slider's state. It provides an example of accessing event details like visible slides, slider position, and overflow status.

```APIDOC
## JavaScript API - Event Handling

### Description
Listen to the `slideChange` event to update your UI based on the slider's current state.

### Method
`addEventListener`

### Event Name
`slideChange`

### Event Detail Properties
- **inViewSlides** (Array<HTMLElement>) - Array of HTML elements currently visible in the viewport.
- **totalInViewSlides** (Number) - The total number of slides currently visible.
- **firstInViewSlide** (HTMLElement) - The first slide element that is currently visible.
- **lastInViewSlide** (HTMLElement) - The last slide element that is currently visible.
- **isAtStart** (Boolean) - True if the slider is currently at the beginning.
- **isAtEnd** (Boolean) - True if the slider is currently at the end.
- **hasNoOverflow** (Boolean) - True if all slides are visible and no scrolling is needed.

### Request Example
```javascript
const sliderEl = document.querySelector('snap-slider');

sliderEl.addEventListener('slideChange', (event) => {
  const { inViewSlides, totalInViewSlides, firstInViewSlide, lastInViewSlide, isAtStart, isAtEnd, hasNoOverflow } = event.detail;

  console.log(`Viewing ${totalInViewSlides} slide(s)`);

  if (isAtStart) {
    console.log('At the beginning of the slider');
  }

  if (isAtEnd) {
    console.log('At the end of the slider');
  }

  if (hasNoOverflow) {
    console.log('All slides are visible - no scrolling needed');
  }

  const slideCounter = document.getElementById('slide-counter');
  if (slideCounter && firstInViewSlide) {
    const currentIndex = Array.from(inViewSlides[0].parentElement.children).indexOf(firstInViewSlide);
    slideCounter.textContent = `Slide ${currentIndex + 1}`;
  }
});
```

### Response
N/A (This is an event listener)
```

--------------------------------

### Get Snap Slider Instance (Alpine.js)

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Retrieves the Snap Slider instance from an Alpine.js component. This method is used when integrating the slider with Alpine.js directives.

```javascript
const sliderEl = document.querySelector('[x-snap-slider]');
const snapSliderInstance = sliderEl.snapSlider;
```

--------------------------------

### Snap Slider JavaScript API

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

This section details the methods and events available for interacting with the Snap Slider programmatically. You can get the slider instance from custom elements or Alpine.js components and use methods like `init()`, `destroy()`, and `refreshSlides()`. The slider also emits a `slideChange` event with detailed information about the current view.

```APIDOC
## Snap Slider JavaScript API

### Methods

To interact with the slider programmatically, first obtain the `SnapSlider` instance.

**For Custom Elements:**
```javascript
const snapSliderElement = document.querySelector('snap-slider');
const snapSliderInstance = snapSliderElement.slider;
```

**For Alpine.js Components:**
```javascript
const sliderEl = document.querySelector('[x-snap-slider]');
const snapSliderInstance = sliderEl.snapSlider;
```

#### Available Methods

- **`init()`**: Initializes the slider. This method is typically called automatically on element creation.
- **`destroy()`**: Removes all event listeners and observers associated with the slider.
- **`refreshSlides()`**: Re-initializes the slider. This is useful when slides are added or removed dynamically after the initial setup.

### Events

The slider dispatches a custom event named `slideChange` on the slider element whenever the set of slides currently in view changes.

#### Listening to `slideChange` Event

```javascript
const sliderEl = document.querySelector('snap-slider'); // Or '[x-snap-slider]'
sliderEl.addEventListener('slideChange', (event) => {
    console.log(event.detail);
});
```

#### `event.detail` Object Properties

- **`inViewSlides`** (Array) - An array containing the slide elements that are currently visible.
- **`totalInViewSlides`** (Number) - The total count of slides currently in view.
- **`firstInViewSlide`** (Element) - The first slide element that is visible.
- **`lastInViewSlide`** (Element) - The last slide element that is visible.
- **`isAtStart`** (Boolean) - Indicates whether the slider is currently positioned at the beginning.
- **`isAtEnd`** (Boolean) - Indicates whether the slider is currently positioned at the end.
- **`hasNoOverflow`** (Boolean) - Indicates whether all slides are visible simultaneously without overflow.
```

--------------------------------

### Get Snap Slider Instance (Custom Element)

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Retrieves the Snap Slider instance from a custom HTML element. This is the primary way to interact with the slider programmatically when using the custom element.

```javascript
const snapSliderElement = document.querySelector('snap-slider');
const snapSliderInstance = snapSliderElement.slider;
```

--------------------------------

### AlpineJS Component Slider Integration

Source: https://context7.com/fylgja/snap-slider/llms.txt

Integrates Fylgja Snap Slider with AlpineJS using a custom directive `x-snap-slider`. This example includes navigation buttons and auto-pagination configured via modifiers. Requires AlpineJS and the Snap Slider Alpine plugin to be loaded.

```html
<!DOCTYPE html>
<html>
<head>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script defer src="https://unpkg.com/@fylgja/snap-slider/dist/alpine/cdn.min.js"></script>
  <style>
    [data-track] {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 1rem;
    }
    [data-track] > * {
      scroll-snap-align: start;
      flex: 0 0 300px;
    }
  </style>
</head>
<body>
  <div x-data x-snap-slider.auto-pager>
    <button data-prev>Previous</button>
    <button data-next>Next</button>

    <div data-track>
      <img src="photo1.jpg" alt="Photo 1" width="300" height="200">
      <img src="photo2.jpg" alt="Photo 2" width="300" height="200">
      <img src="photo3.jpg" alt="Photo 3" width="300" height="200">
    </div>
  </div>
</body>
</html>
```

--------------------------------

### Instantiate SnapSlider Class - JavaScript

Source: https://context7.com/fylgja/snap-slider/llms.txt

Demonstrates how to instantiate the SnapSlider class directly in JavaScript. This allows for explicit control over the slider's initialization and configuration. It covers basic instantiation with a slider element, advanced configuration options, and accessing the slider's properties after instantiation. No external dependencies are required for this basic usage.

```javascript
import { SnapSlider } from '@fylgja/snap-slider';

// Basic instantiation
const sliderElement = document.getElementById('my-slider');
const slider = new SnapSlider(sliderElement);

// With configuration options
const sliderWithOptions = new SnapSlider(sliderElement, {
  labelSepparator: '|',    // Changes "1 of 5" to "1 | 5"
  autoPager: true,         // Generate pagination automatically
  groupPager: true         // Group pagers for multi-slide views
});

// Access slider properties
console.log('Total slides:', slider.slides.length);
console.log('Track element:', slider.track);
console.log('Pager element:', slider.pager);
console.log('Navigation buttons:', slider.navBtns);

```

--------------------------------

### HTML for Custom Manual Pagination

Source: https://context7.com/fylgja/snap-slider/llms.txt

Demonstrates creating a custom pagination layout using HTML buttons linked to slide IDs. This method allows full control over the pager's appearance and behavior, leveraging ARIA attributes for accessibility.

```html
<snap-slider id="my-slider">
  <div data-track>
    <div id="intro-slide">
      <h2>Introduction</h2>
      <p>Welcome to our product showcase</p>
    </div>
    <div id="features-slide">
      <h2>Features</h2>
      <p>Explore our amazing features</p>
    </div>
    <div id="pricing-slide">
      <h2>Pricing</h2>
      <p>Choose the plan that fits you</p>
    </div>
  </div>

  <nav data-pager>
    <button href="#intro-slide" aria-label="Go to introduction">Intro</button>
    <button href="#features-slide" aria-label="Go to features">Features</button>
    <button href="#pricing-slide" aria-label="Go to pricing">Pricing</button>
  </nav>
</snap-slider>

<style>
  [data-pager] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
  }
  [data-pager] button {
    padding: 0.5rem 1rem;
    border: 2px solid #ddd;
    background: white;
    cursor: pointer;
  }
  [data-pager] button[aria-current="true"] {
    border-color: #333;
    background: #f0f0f0;
  }
</style>
```

--------------------------------

### Custom Configuration Options

Source: https://context7.com/fylgja/snap-slider/llms.txt

Learn how to customize the Snap Slider's appearance and behavior using various data attributes. This includes options for pagination, labels, and CSS classes for elements like the pager and markers.

```APIDOC
## Custom Configuration Options

### Description
Customize the appearance and functionality of the Snap Slider using data attributes directly on the `snap-slider` element.

### Data Attributes
- **`aria-label`** (String) - Sets the ARIA label for the slider component.
- **`data-auto-pager`** (Boolean) - Enables or disables the automatic generation of pagination indicators. Defaults to `false`.
- **`data-group-pager`** (Boolean) - Groups pagination indicators if set to `true`. Defaults to `false`.
- **`data-slide-label-sepparator`** (String) - The separator character used in slide labels (e.g., "/").
- **`data-pager-class`** (String) - CSS class to apply to the automatically generated pager container.
- **`data-marker-class`** (String) - CSS class to apply to each pagination marker (dot).
- **`data-prev`** - Attribute to mark a button element as the previous slide navigation.
- **`data-next`** - Attribute to mark a button element as the next slide navigation.

### HTML Example
```html
<snap-slider
  id="custom-config-slider"
  aria-label="product-showcase"
  data-auto-pager="true"
  data-group-pager="false"
  data-slide-label-sepparator="/"
  data-pager-class="custom-pager-container"
  data-marker-class="custom-dot"
>
  <button data-prev class="nav-button">←</button>
  <button data-next class="nav-button">→</button>

  <div data-track style="display: flex; overflow-x: auto; scroll-snap-type: x mandatory;">
    <img src="product1.jpg" alt="Product 1" width="400" height="300" style="scroll-snap-align: start;">
    <img src="product2.jpg" alt="Product 2" width="400" height="300" style="scroll-snap-align: start;">
    <img src="product3.jpg" alt="Product 3" width="400" height="300" style="scroll-snap-align: start;">
  </div>
</snap-slider>

<style>
  .custom-pager-container {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 8px;
  }

  .custom-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #999;
    border: none;
    transition: all 0.3s;
  }

  .custom-dot[aria-current="true"] {
    background: #333;
    transform: scale(1.5);
  }
</style>
```

### Notes
- Slides will automatically receive ARIA labels like "1 / 3" based on their position and the total number of slides, using the `data-slide-label-sepparator`.
- The slider ID (e.g., "product-showcase") is used for generating unique IDs for elements like the pager.
- Navigation buttons marked with `data-prev` and `data-next` will be automatically wired up if present.
```

--------------------------------

### Configure Custom Pager with Slide Links

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Illustrates how to set up a custom pager for the Snap Slider. Each pager marker links to a specific slide using `href` or `data-target-id`, requiring slides to have unique IDs.

```html
<!-- Example with href -->
<a href="#slide-id">Slide 1</a>

<!-- Example with data-target-id -->
<button data-target-id="slide-id">Go to Slide</button>
```

--------------------------------

### HTML for Grouped Pagination

Source: https://context7.com/fylgja/snap-slider/llms.txt

Illustrates how to configure Snap Slider for grouped pagination, suitable for scenarios where multiple slides are visible at once. The `data-group-pager` attribute, combined with CSS Grid for track layout, enables this functionality.

```html
<snap-slider data-auto-pager data-group-pager>
  <div data-track style="display: grid; grid-auto-flow: column; grid-auto-columns: 33%; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;">
    <div style="scroll-snap-align: start; background: #f0f0f0; padding: 2rem;">Item 1</div>
    <div style="scroll-snap-align: start; background: #e0e0e0; padding: 2rem;">Item 2</div>
    <div style="scroll-snap-align: start; background: #d0d0d0; padding: 2rem;">Item 3</div>
    <div style="scroll-snap-align: start; background: #c0c0c0; padding: 2rem;">Item 4</div>
    <div style="scroll-snap-align: start; background: #b0b0b0; padding: 2rem;">Item 5</div>
    <div style="scroll-snap-align: start; background: #a0a0a0; padding: 2rem;">Item 6</div>
    <div style="scroll-snap-align: start; background: #909090; padding: 2rem;">Item 7</div>
    <div style="scroll-snap-align: start; background: #808080; padding: 2rem;">Item 8</div>
    <div style="scroll-snap-align: start; background: #707070; padding: 2rem;">Item 9</div>
  </div>
</snap-slider>

<!-- With 3 slides visible at a time, this creates 3 pagination markers (9 slides / 3 = 3 groups) -->
```

--------------------------------

### Dynamic Slide Management

Source: https://context7.com/fylgja/snap-slider/llms.txt

This section demonstrates how to dynamically add and remove slides from the `snap-slider`. It highlights that the slider automatically refreshes its state and management when slides are modified, thanks to a `MutationObserver`.

```APIDOC
## Dynamic Slide Management

### Description
Manage your slides dynamically by adding or removing them from the slider. The component automatically observes changes and updates its internal state.

### Method
DOM Manipulation (appendChild, removeChild)

### Usage
Add or remove slide elements within the slider's track element. The slider will automatically detect these changes.

### HTML Example
```html
<snap-slider id="dynamic-slider" data-auto-pager>
  <button id="add-slide">Add Slide</button>
  <button id="remove-slide">Remove Last Slide</button>

  <div data-track style="display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;">
    <div style="scroll-snap-align: start; flex: 0 0 300px; background: #eee; padding: 2rem;">Slide 1</div>
    <div style="scroll-snap-align: start; flex: 0 0 300px; background: #ddd; padding: 2rem;">Slide 2</div>
  </div>
</snap-slider>
```

### JavaScript Example
```javascript
const slider = document.getElementById('dynamic-slider');
const track = slider.querySelector('[data-track]');
let slideCount = 2;

document.getElementById('add-slide').addEventListener('click', () => {
  slideCount++;
  const newSlide = document.createElement('div');
  newSlide.style.cssText = 'scroll-snap-align: start; flex: 0 0 300px; background: #ccc; padding: 2rem;';
  newSlide.textContent = `Slide ${slideCount}`;
  track.appendChild(newSlide);
  // Slider automatically refreshes via MutationObserver
});

document.getElementById('remove-slide').addEventListener('click', () => {
  const lastSlide = track.lastElementChild;
  if (lastSlide && track.children.length > 1) {
    lastSlide.remove();
    slideCount--;
    // Slider automatically refreshes via MutationObserver
  }
});
```

### Response
N/A (This is a demonstration of DOM manipulation and automatic slider updates)
```

--------------------------------

### Custom Element Slider with Navigation and Auto Pagination

Source: https://context7.com/fylgja/snap-slider/llms.txt

Shows how to implement a Fylgja Snap Slider Custom Element with navigation buttons and automatic pagination. The component generates pagination markers and handles their states. Uses data attributes for configuration and includes basic styling for controls and markers.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@fylgja/snap-slider/dist/custom-element/cdn.min.js" defer></script>
  <style>
    [data-track] {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 1rem;
    }
    [data-track] > * {
      scroll-snap-align: start;
      flex: 0 0 80%;
    }
    .snap-pager {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    .snap-marker {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ccc;
      border: none;
      cursor: pointer;
    }
    .snap-marker[aria-current="true"] {
      background: #333;
      width: 24px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <snap-slider data-auto-pager>
    <button data-prev aria-label="Previous Slide">←</button>
    <button data-next aria-label="Next Slide">→</button>

    <div data-track>
      <div style="background: lightblue; padding: 4rem; text-align: center;">
        <h2>Slide 1</h2>
        <p>First slide content</p>
      </div>
      <div style="background: lightcoral; padding: 4rem; text-align: center;">
        <h2>Slide 2</h2>
        <p>Second slide content</p>
      </div>
      <div style="background: lightgreen; padding: 4rem; text-align: center;">
        <h2>Slide 3</h2>
        <p>Third slide content</p>
      </div>
    </div>
  </snap-slider>
</body>
</html>
```

--------------------------------

### JavaScript API for Programmatic Slider Control

Source: https://context7.com/fylgja/snap-slider/llms.txt

Demonstrates using the SnapSlider instance's methods to control the slider programmatically. This includes navigating slides, refreshing the slider after DOM changes, and initializing or destroying the slider instance.

```javascript
const sliderEl = document.querySelector('snap-slider');
const slider = sliderEl.slider;

// Navigate to next slide
slider.goToSlideDir('next');

// Navigate to previous slide
slider.goToSlideDir('prev');

// Refresh slides after dynamically adding/removing
const track = sliderEl.querySelector('[data-track]');
const newSlide = document.createElement('div');
newSlide.innerHTML = '<h3>New Slide</h3><p>Dynamically added</p>';
track.appendChild(newSlide);
slider.refreshSlides(); // Re-initializes slider with new slides

// Destroy slider (removes all observers and event listeners)
slider.destroy();

// Reinitialize slider
slider.init();
```

--------------------------------

### Enable Auto Pager and Group Pager in Alpine.js

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Configures the Snap Slider in Alpine.js to automatically generate pagination markers and group them based on visible slides by using directive modifiers.

```html
<div x-data x-snap-slider.auto-pager.group-pager>
    ...
</div>
```

--------------------------------

### Basic Custom Element Slider

Source: https://context7.com/fylgja/snap-slider/llms.txt

Demonstrates the basic integration of Fylgja Snap Slider as a Custom Element. Requires importing the custom element script and defining a track container with slides. CSS is used to enable scroll snapping.

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import '@fylgja/snap-slider/custom-element';
  </script>
  <style>
    [data-track] {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 1rem;
    }
    [data-track] > * {
      scroll-snap-align: start;
      flex: 0 0 300px;
    }
  </style>
</head>
<body>
  <snap-slider>
    <div data-track>
      <img src="slide1.jpg" alt="Slide 1" width="300" height="200">
      <img src="slide2.jpg" alt="Slide 2" width="300" height="200">
      <img src="slide3.jpg" alt="Slide 3" width="300" height="200">
      <img src="slide4.jpg" alt="Slide 4" width="300" height="200">
    </div>
  </snap-slider>
</body>
</html>
```

--------------------------------

### Configure Snap Slider with Data Attributes in HTML

Source: https://context7.com/fylgja/snap-slider/llms.txt

Customize the Snap Slider's appearance and behavior using data attributes directly in the HTML. Options include pagination generation, custom classes for pagers and markers, and accessibility labels.

```html
<snap-slider
  id="custom-config-slider"
  aria-label="product-showcase"
  data-auto-pager="true"
  data-group-pager="false"
  data-slide-label-sepparator="/"
  data-pager-class="custom-pager-container"
  data-marker-class="custom-dot"
>
  <button data-prev class="nav-button">←</button>
  <button data-next class="nav-button">→</button>

  <div data-track style="display: flex; overflow-x: auto; scroll-snap-type: x mandatory;">
    <img src="product1.jpg" alt="Product 1" width="400" height="300" style="scroll-snap-align: start;">
    <img src="product2.jpg" alt="Product 2" width="400" height="300" style="scroll-snap-align: start;">
    <img src="product3.jpg" alt="Product 3" width="400" height="300" style="scroll-snap-align: start;">
  </div>
</snap-slider>

<style>
  .custom-pager-container {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 8px;
  }

  .custom-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #999;
    border: none;
    transition: all 0.3s;
  }

  .custom-dot[aria-current="true"] {
    background: #333;
    transform: scale(1.5);
  }
</style>
```

--------------------------------

### Use Snap Slider Custom Element in HTML

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Demonstrates the basic structure for using the Snap Slider as a Custom Element in HTML. It requires a `<snap-slider>` tag with a child `[data-track]` element for the slides.

```html
<snap-slider>
    <div data-track>
        <!-- Your slides go here -->
    </div>
</snap-slider>
```

--------------------------------

### Add and Remove Slides Dynamically with HTML and JavaScript

Source: https://context7.com/fylgja/snap-slider/llms.txt

Manage dynamic content by adding or removing slides to the slider. The component automatically refreshes its state due to a MutationObserver, ensuring seamless integration of new or removed slides without manual reinitialization.

```html
<snap-slider id="dynamic-slider" data-auto-pager>
  <button id="add-slide">Add Slide</button>
  <button id="remove-slide">Remove Last Slide</button>

  <div data-track style="display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;">
    <div style="scroll-snap-align: start; flex: 0 0 300px; background: #eee; padding: 2rem;">Slide 1</div>
    <div style="scroll-snap-align: start; flex: 0 0 300px; background: #ddd; padding: 2rem;">Slide 2</div>
  </div>
</snap-slider>
```

```javascript
const slider = document.getElementById('dynamic-slider');
const track = slider.querySelector('[data-track]');
let slideCount = 2;

document.getElementById('add-slide').addEventListener('click', () => {
  slideCount++;
  const newSlide = document.createElement('div');
  newSlide.style.cssText = 'scroll-snap-align: start; flex: 0 0 300px; background: #ccc; padding: 2rem;';
  newSlide.textContent = `Slide ${slideCount}`;
  track.appendChild(newSlide);
});

document.getElementById('remove-slide').addEventListener('click', () => {
  const lastSlide = track.lastElementChild;
  if (lastSlide && track.children.length > 1) {
    lastSlide.remove();
    slideCount--;
  }
});
```

--------------------------------

### Include Snap Slider Alpine.js Version via CDN

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Integrates the Snap Slider for Alpine.js into an HTML document using a CDN link. This is for projects utilizing Alpine.js for their frontend interactivity.

```html
<script defer src="https://unpkg.com/@fylgja/snap-slider/dist/alpine/cdn.min.js"></script>
```

--------------------------------

### Include Snap Slider Custom Element via CDN

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Integrates the Snap Slider Custom Element into an HTML document using a CDN link. This method is suitable for projects that do not use a build process.

```html
<script defer src="https://unpkg.com/@fylgja/snap-slider/dist/custom-element/cdn.min.js"></script>
```

--------------------------------

### Import and Register Snap Slider Alpine.js Component

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Imports the Alpine.js plugin for Snap Slider and registers it with Alpine.js. This enables the use of the `x-snap-slider` directive.

```javascript
import Alpine from 'alpinejs';
import snapSlider from '@fylgja/snap-slider/alpine';

window.Alpine = Alpine;

Alpine.plugin(snapSlider);
Alpine.start();
```

--------------------------------

### Snap Slider Custom Element Integration - HTML

Source: https://github.com/fylgja/snap-slider/blob/main/index.html

This HTML snippet demonstrates how to include the Fylgja Snap Slider custom element in a web page. It uses a script tag to load the component from a CDN and includes placeholder images within a `snap-slider` element. The `defer` attribute ensures the script executes after the HTML is parsed.

```html
<script src="//unpkg.com/@fylgja/snap-slider" defer></script>

<snap-slider>
  <img src="https://fylgja.dev/images/placeholders/cat.webp" alt="">
  <img src="https://fylgja.dev/images/placeholders/dog.webp" alt="">
  <img src="https://fylgja.dev/images/placeholders/bear.webp" alt="">
  <img src="https://fylgja.dev/images/placeholders/fox.webp" alt="">
  <img src="https://fylgja.dev/images/placeholders/hare.webp" alt="">
</snap-slider>
```

--------------------------------

### Listen to Slide Change Events in JavaScript

Source: https://context7.com/fylgja/snap-slider/llms.txt

Subscribe to the `slideChange` event to react to viewport changes. This event provides details about the currently visible slides, such as their count, elements, and position within the slider. It's useful for updating UI elements based on the slider's state.

```javascript
const sliderEl = document.querySelector('snap-slider');

sliderEl.addEventListener('slideChange', (event) => {
  const {
    inViewSlides,
    totalInViewSlides,
    firstInViewSlide,
    lastInViewSlide,
    isAtStart,
    isAtEnd,
    hasNoOverflow
  } = event.detail;

  console.log(`Viewing ${totalInViewSlides} slide(s)`);

  if (isAtStart) {
    console.log('At the beginning of the slider');
  }

  if (isAtEnd) {
    console.log('At the end of the slider');
  }

  if (hasNoOverflow) {
    console.log('All slides are visible - no scrolling needed');
  }

  const slideCounter = document.getElementById('slide-counter');
  if (slideCounter && firstInViewSlide) {
    const currentIndex = Array.from(inViewSlides[0].parentElement.children).indexOf(firstInViewSlide);
    slideCounter.textContent = `Slide ${currentIndex + 1}`;
  }
});
```

--------------------------------

### Use Snap Slider with Alpine.js Directive

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Applies the `x-snap-slider` directive to an element in Alpine.js to enable the Snap Slider functionality. It requires a `[data-track]` element for the slides.

```html
<div x-data x-snap-slider>
    <div data-track>
        <!-- Your slides go here -->
    </div>
</div>
```

--------------------------------

### Listen for Snap Slider 'slideChange' Event

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Attaches an event listener to detect when the visible slides in the Snap Slider change. The event detail provides comprehensive information about the current slide state.

```javascript
const sliderEl = document.querySelector('snap-slider'); // Or '[x-snap-slider]'
sliderEl.addEventListener('slideChange', (event) => {
    console.log(event.detail);
    // event.detail contains properties like inViewSlides, totalInViewSlides, etc.
});
```

--------------------------------

### Import Snap Slider Custom Element

Source: https://github.com/fylgja/snap-slider/blob/main/README.md

Imports the Snap Slider Custom Element definition into a JavaScript module. This allows the `<snap-slider>` tag to be recognized and used in the HTML.

```javascript
import '@fylgja/snap-slider/custom-element';
```

--------------------------------

### Snap Pager and Snap Marker CSS

Source: https://github.com/fylgja/snap-slider/blob/main/alpinejs.html

These CSS rules define the styling for the snap slider's pagination controls. '.snap-pager' styles the container for pagination dots, ensuring they are centered and scrollable. '.snap-marker' styles individual pagination dots, including active states and transitions.

```css
.snap-pager {
  justify-content: center;
  display: flex;
  overflow: auto;
  margin-block: 1rem;
  gap: 0.5em;
  min-block-size: 1em;
}

.snap-marker {
  --btn-active-stroke: var(--brand);
  --btn-active-bg: var(--brand);
  padding: 2px;
  width: 1em;
  height: 1em;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, var(--outline-transition), width 0.2s;
}

.snap-marker[aria-current="true"] {
  width: 1.5em;
}
```

--------------------------------

### Add Slide with JavaScript

Source: https://github.com/fylgja/snap-slider/blob/main/alpinejs.html

This JavaScript snippet adds a new image slide to a target element when an attribute 'data-action-add-slide' is clicked. It randomly selects an image from a predefined array and appends it as an 'img' element. It requires a target element with a 'data-track' attribute to append the new slide.

```javascript
document.addEventListener("click", (e) => {
  const triggerName = "data-action-add-slide";
  if (!e.target.hasAttribute(triggerName)) return;
  const triggerTarget = e.target.getAttribute(triggerName);
  const target = document
    .getElementById(triggerTarget)
    ?.querySelector("[data-track]");
  if (!target) return;
  const newSlide = document.createElement("img");
  const imgArray = [
    "seagull",
    "hare",
    "bear",
    "fox",
    "frog",
    "cat",
    "dog",
  ];
  const imgArrayRandom = Math.floor(
    Math.random() * imgArray.length
  );
  newSlide.setAttribute(
    "src",
    `https://fylgja.dev/images/placeholders/${imgArray[imgArrayRandom]}.webp`
  );
  newSlide.setAttribute("alt", "JS Slide");
  newSlide.setAttribute("width", "480");
  newSlide.setAttribute("height", "320");
  target.appendChild(newSlide);
});
```

--------------------------------

### Snap Slider CSS Styling - CSS

Source: https://github.com/fylgja/snap-slider/blob/main/index.html

This CSS defines styles for the snap slider's pager and marker elements. It includes properties for layout, appearance, and transitions. The `.snap-marker` styles adapt when its `aria-current` attribute is true, indicating the active slide.

```css
.snap-pager { justify-content: center; display: flex; overflow: auto; margin-block: 1rem; gap: 0.5em; min-block-size: 1em; } 
.snap-marker { --btn-active-stroke: var(--brand); --btn-active-bg: var(--brand); padding: 2px; width: 1em; height: 1em; transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, var(--outline-transition), width 0.2s; } 
.snap-marker[aria-current="true"] { width: 1.5em; }
```

--------------------------------

### Add Slide Button Functionality - JavaScript

Source: https://github.com/fylgja/snap-slider/blob/main/index.html

This JavaScript code snippet adds functionality to a button that, when clicked, appends a new image slide to a target element. It selects an image randomly from a predefined array and sets its source and alt attributes. This requires an HTML structure with elements having specific data attributes for triggering and targeting.

```javascript
document.addEventListener("click", (e) => {
  const triggerName = "data-action-add-slide";
  if (!e.target.hasAttribute(triggerName)) return;
  const triggerTarget = e.target.getAttribute(triggerName);
  const target = document .getElementById(triggerTarget) ?.querySelector("[data-track]");
  if (!target) return;
  const newSlide = document.createElement("img");
  const imgArray = [
    "seagull",
    "hare",
    "bear",
    "fox",
    "frog",
    "cat",
    "dog",
  ];
  const imgArrayRandom = Math.floor(
    Math.random() * imgArray.length
  );
  newSlide.setAttribute(
    "src",
    `https://fylgja.dev/images/placeholders/${imgArray[imgArrayRandom]}.webp`
  );
  newSlide.setAttribute("alt", "JS Slide");
  newSlide.setAttribute("width", "480");
  newSlide.setAttribute("height", "320");
  target.appendChild(newSlide);
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.