# Triple Slider Plugin

A three-lane jQuery slider with sequential transitions. Left lane moves first, then right-top, then right-bottom, each with independent content timing.

## End-to-End Delivery

We deliver projects in clear phases with predictable milestones and transparent communication.

View Setup

## Scalable Architecture

Built for growth with predictable performance, maintainability, and smooth feature expansion.

Read Options

## Analytics and Optimization

Measure user behavior, monitor KPIs, and continuously improve conversion quality.

Troubleshooting

## Installation

1. Copy `triple-slider.js` and `styles.css` into your project.
2. Add jQuery before the slider script.
3. Add slider HTML markup with `data-*` configuration attributes.
4. Initialize with `$(".triple-slider").tripleSlider();`.

    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="triple-slider.js"></script>
    <script>
      $(function () {
        $(".triple-slider").tripleSlider();
      });
    </script>

## Required HTML Structure

Each logical slide contains exactly three image slots:

- `left` (large lane)
- `right-top` (small lane)
- `right-bottom` (small lane)

    <section class="triple-slider" ...>
      <div class="ts-scenes">
        <article class="ts-scene">
          <div class="ts-panel" data-slot="left"><img ...></div>
          <div class="ts-panel" data-slot="right-top"><img ...></div>
          <div class="ts-panel" data-slot="right-bottom"><img ...></div>
          <div class="ts-content">
            <h2 class="ts-title">...</h2>
            <p class="ts-description">...</p>
            <a class="ts-cta" href="#">...</a>
          </div>
        </article>
      </div>
    </section>

## Configuration (Data Attributes)

Attribute | Type | Default | Description
--- | --- | --- | ---
`data-ratio-desktop` | string | `16/9` | Desktop aspect ratio.
`data-ratio-tablet` | string | `4/3` | Tablet aspect ratio.
`data-ratio-mobile` | string | `1/1` | Mobile aspect ratio.
`data-duration` | number | `900` | Single lane transition duration in ms.
`data-panel-delay` | number | `1000` | Delay between lane starts (left -> top -> bottom).
`data-content-hide-lead` | number | `180` | Time between content fade-out and lane movement.
`data-content-stagger` | number | `220` | Delay before content fades in after lane movement.
`data-easing` | string | `cubic-bezier(0.22, 1, 0.36, 1)` | Transition easing curve.
`data-autoplay` | boolean | `true` | Enable or disable autoplay.
`data-autoplay-delay` | number | `3000` | Delay between autoplay transitions.
`data-autoplay-resume-delay` | number | `6000` | Resume autoplay delay after user interaction.
`data-loop` | boolean | `true` | Enable infinite looping.
`data-swipe-threshold` | number | `50` | Minimum swipe distance in pixels.
`data-reduced-motion` | string | `auto` | `auto`, `on`, or `off`.

## Accessibility Notes

- Keyboard navigation is enabled with `ArrowLeft` and `ArrowRight`.
- Navigation and autoplay buttons include accessible labels.
- Focus states are visible on controls.
- The plugin honors `prefers-reduced-motion` when set to `auto`.

## Troubleshooting

- Images look cropped: this is expected with `object-fit: cover`. Use focal-friendly source images.
- No animation: verify jQuery is loaded before `triple-slider.js`.
- No content visible: confirm each scene contains `.ts-content` with title/description/cta elements.
- Unexpected timing: tune `data-panel-delay`, `data-duration`, and `data-content-stagger`.