BrickSlider - Tailwind-friendly carousel, stories slider and accessible UI
The modular carousel engine<br>for the modern web
Framework-agnostic carousel engine powered by the Web Animations<br>API, with Stories support, accessibility plugin, and<br>Tailwind-friendly markup.
$npm i @sixsrc/brick-slider
$npm i @sixsrc/brick-slider @sixsrc/brick-slider-accessibility
$npm i @sixsrc/brick-slider @sixsrc/brick-slider-stories
bash
Get Started
View on GitHub
Why BrickSlider?
Built for developers who want control without the bloat
TypeScript First
Written in TypeScript with no runtime dependencies. Full<br>IntelliSense support out of the box.
WAAPI Powered
Smooth, modern motion powered by the Web Animations API with<br>hardware acceleration.
Plugin Driven
Extend functionality with `slider.use(plugin)`. Dedicated<br>plugins for accessibility and stories.
Quick Setup
Start with npm in bundlers, or link the ESM CDN directly with<br>in plain HTML.
npm / bundlers
import { BrickSlider } from "@sixsrc/brick-slider"
const slider = new BrickSlider("#slider", {<br>slidesPerView: 1,<br>slidesPerPage: 1,<br>gap: 16,<br>useLoop: false<br>})
slider.init()
CDN / plain HTML
src="https://cdn.jsdelivr.net/npm/@sixsrc/brick-slider@1.0.15/lib/brick-slider.browser.js">
const slider = new window.BrickSlider("#slider", {<br>slidesPerView: 1,<br>slidesPerPage: 1<br>})
slider.init()
View markup guide →
Packages
Install only what you need. All packages work standalone.
Core
The main slider library with navigation, touch, drag, and<br>responsive support.
@sixsrc/brick-slider
Accessibility
Screen reader announcements, keyboard navigation, and focus<br>management.
@sixsrc/brick-slider-accessibility
Stories
Instagram-style story carousel with timed progress and video<br>awareness.
@sixsrc/brick-slider-stories
Tailwind
Structural Tailwind utilities and preset CSS for BrickSlider<br>markup.
@sixsrc/brick-slider-tailwind
Support the Project
If BrickSlider helps you, consider supporting its development.
💜 GitHub Sponsors