CSS-first slider for the modern web

Multi-Slide View

Show multiple slides at once with gap spacing.

Viewport Breakout

Let slides overflow past the content column while clipping at the page edge. This demo keeps the slider aligned to the docs content width, but adds internal gutter padding so the active card never sits flush against the screen.

Set the outer wrapper to full bleed, add the library's aero-slider--breakout class, then put the docs-specific sizing tokens on that slider instance to keep slide sizing tied to the normal content column with --aero-layout-width, and set --aero-edge-inset so the first and last snapped slides line up with the page gutter.

:root {
  --page-gutter: 1rem;
}

@media (min-width: 640px) {
  :root {
    --page-gutter: 1.5rem;
  }
}

body {
  overflow-x: hidden;
}

.docs-breakout-clip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.aero-slider--viewport-breakout-demo {
  --slides-per-view: 1.12;
  --slide-gap: 12px;
  --aero-edge-inset: var(--page-gutter);
  --aero-layout-width: min(72rem, calc(100vw - var(--page-gutter) * 2));
}

@media (min-width: 640px) {
  .aero-slider--viewport-breakout-demo {
    --slides-per-view: 1.35;
    --slide-gap: 18px;
  }
}

Alignment

Use alignment to snap the active slide to the left, center, or right side of the viewport. Center is the default.

createSlider(leftEl, { alignment: "left", loop: true });
createSlider(centerEl, { alignment: "center", loop: true });
createSlider(rightEl, { alignment: "right", loop: true });

Responsive with Media Queries

Layout adapts to viewport: 1 slide on mobile, 2 on tablet, 3 on desktop. Resize the window to see the slider re-read --slides-per-view from CSS.

/* 1 slide on mobile, 2 on tablet, 3 on desktop */
.aero-slider--responsive {
  --slides-per-view: 1;
  --slide-gap: 8px;
}
@media (min-width: 640px) {
  .aero-slider--responsive {
    --slides-per-view: 2;
    --slide-gap: 12px;
  }
}
@media (min-width: 1024px) {
  .aero-slider--responsive {
    --slides-per-view: 3;
    --slide-gap: 16px;
  }
}

Autoplay + Loop

Auto-advances every 3 seconds with infinite looping. Pauses on hover and drag.

Thumbnail Sync

A main slider plus a thumbnail strip: clicking a thumbnail navigates the main slider, and when you change slides (drag, arrows, etc.), the thumbnail strip scrolls to keep the active thumb in view. Use the syncThumbnails() function — both sliders must have the same number of slides. If you want the active thumb centered, set alignment: "center" on the thumbnail slider.

<div id="main-slider" class="aero-slider">
  <div class="aero-slider__viewport relative">
    <button type="button" class="aero-slider__nav--prev" aria-label="Previous">…</button>
    <button type="button" class="aero-slider__nav--next" aria-label="Next">…</button>
    <div class="aero-slider__track">
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </div>
  </div>
</div>

<div id="thumb-slider" class="aero-slider" style="--slides-per-view: 3; --slide-gap: 8px;">
  <div class="aero-slider__viewport">
    <div class="aero-slider__track">
      <div>Thumb 1</div>
      <div>Thumb 2</div>
      <div>Thumb 3</div>
    </div>
  </div>
</div>

import { createSlider, syncThumbnails } from "aero-slider";

const main = createSlider(document.getElementById("main-slider"));
const thumbs = createSlider(document.getElementById("thumb-slider"), {
  alignment: "center",
});
const teardown = syncThumbnails(main, thumbs);

// On unmount:
// teardown();
// main.destroy();
// thumbs.destroy();

Direction

Set direction to "rtl" for right-to-left or "ttb" for vertical (top-to-bottom). Keyboard arrows, drag axis, and scroll axis all adapt automatically.

// RTL
createSlider(rtlEl, { direction: "rtl" });

// Vertical
createSlider(verticalEl, { direction: "ttb" });

Dynamic Slides

Use add() and remove() to dynamically insert or remove slides. The slider rebuilds pagination, navigation, and loop clones automatically.

const slider = createSlider(el);

// Add a new slide at the end
const slide = document.createElement("div");
slide.textContent = "New";
slider.add(slide);

// Add at a specific position
slider.add(slide, 2);

// Remove the last slide
slider.remove(slider.slideCount - 1);

// Remove multiple slides
slider.remove([0, 1]);

Per-Move

Set perMove to control how many slides advance per arrow/keyboard press. Here, 3 slides are visible but each press moves by 2, with looping enabled.

createSlider(el, { perMove: 2, loop: true });
// With CSS: --slides-per-view: 3; --slide-gap: 12px;

Pagination & Navigation

<div class="aero-slider">
  <div class="aero-slider__viewport relative">
    <div class="aero-slider__track">
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </div>
  </div>
  <div class="aero-slider__pagination">
    <span class="aero-slider__dot"></span>
  </div>
</div>

<div class="aero-slider">
  <div class="aero-slider__viewport relative">
    <button type="button" class="aero-slider__nav--prev" aria-label="Previous slide">‹</button>
    <button type="button" class="aero-slider__nav--next" aria-label="Next slide">›</button>
    <div class="aero-slider__track">
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </div>
  </div>
</div>