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

Copy triple-slider.js and styles.css into your project.
Add jQuery before the slider script.
Add slider HTML markup with data-* configuration attributes.
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.