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