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 the scroll track spans the full viewport. The active card's left edge stays locked to the normal content column, and the neighboring slides bleed off toward the screen edges.

Set the outer wrapper to full bleed, add the library's aero-slider--breakout class, and tie slide sizing to the content column with --aero-layout-width. The library derives the edge gutter automatically, so the first and last cards land on the column. This demo uses alignment: "left" for the Apple-style left-flush layout.

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

body {
  overflow-x: hidden;
}

/* Full-bleed wrapper lets slides reach the screen edges */
.breakout-clip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Size slides off the content column; the library aligns the active
   card to that column and derives the edge gutter automatically. */
.my-breakout {
  --slides-per-view: 1.35;
  --slide-gap: 18px;
  --aero-layout-width: min(72rem, calc(100vw - var(--page-gutter) * 2));
}

/* createSlider(el, { alignment: "left" }); */

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. The countdown restarts after any manual change. Pauses on hover, keyboard focus, press, drag, and hidden tabs, and stops whenever prefers-reduced-motion is on.

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>