Infinite Loop

Enable seamless infinite navigation by setting loop: true. The slider clones boundary slides into the DOM and silently teleports after each loop transition.

Basic usage

new Slider('#el', {
  loop: true,
})

How it works

When loop: true is set the slider creates DOM clones of the boundary slides:

  • The last slidesPerPage slides are cloned and prepended before the first real slide.
  • The first slidesPerPage slides are cloned and appended after the last real slide.

Navigation across the boundary works in three steps:

  1. The wrapper animates to the clone position (appears seamless).
  2. Once the CSS transition ends, the wrapper instantly jumps to the corresponding real slide (no visual change).
  3. The slider is ready for the next navigation.

With slidesPerPage

new Slider('#el', {
  slidesPerPage: 2,
  gutter: 16,
  loop: true,
})

The clone count always matches slidesPerPage, so the loop boundary always looks like a full page of content.

With rewind (alternative)

If you prefer a non-clone approach, use rewind: true instead. It jumps from last to first (and back) without any DOM cloning — useful when a visible "reset" jump is acceptable.

new Slider('#el', {
  rewind: true, // no clones, visible jump
})

Note: loop and rewind are mutually exclusive. If both are set, loop takes precedence.

With autoplay

import { autoplay } from '@andresclua/sliderkit-plugins'

new Slider('#el', {
  loop: true,
  plugins: [autoplay({ delay: 3000 })],
})

Caveats

  • Clones are aria-hidden and excluded from tab order.
  • Loop requires at least 2 slides. With a single slide it is a no-op.
  • For slidesPerPage > 1, ensure you have more slides than slidesPerPage; otherwise there are no pages to loop between.
  • The seamless jump happens only for single-step boundary navigation (next at last slide, prev at first). Programmatic goTo(index) across the boundary still wraps without the clone animation.