Aero Slider

A lightweight (~7.5KB gzipped), CSS-first slider library for the modern web.

• CSS-First Architecture — Layout via custom properties, responsive via media queries
• Native Scroll Snapping — Hardware-accelerated, smooth scrolling
• Minimal JS Footprint — Only handles events, loop cloning, pagination, autoplay
• Zero Dependencies — No external libraries required
• Thumbnail Syncing — Link primary sliders with thumbnail navigation
• iOS-Style Pagination — Optional maxDots for windowed dot navigation

Documentation: aeroslider.com

Installation

Package manager (recommended)

bun add aero-slider

Or with npm:

npm install aero-slider

Then import the package and styles:

import { createSlider } from "aero-slider";
import "aero-slider/slider.css";

Global script (no bundler)

Add the JavaScript and CSS files. Use type="module" so the script assigns AeroSlider to window:

<link rel="stylesheet" href="https://unpkg.com/aero-slider/dist/aero-slider.min.css" />
<script type="module" src="https://unpkg.com/aero-slider/dist/aero-slider.min.js"></script>

Or download from the releases page. This creates a global AeroSlider object:

const slider = AeroSlider.createSlider(document.getElementById("my-slider"), { loop: true });

// With thumbnails:
const main = AeroSlider.createSlider(mainEl);
const thumbs = AeroSlider.createSlider(thumbsEl);
const teardown = AeroSlider.syncThumbnails(main, thumbs);

Contributing

See CONTRIBUTING.md for development setup, working on the doc site, and publishing.