Build sliders
that actually work.
SliderKit is a modular, accessible slider engine with a lean core, tree-shakeable plugins, CSS effects, and WebGL renderer. Zero dependencies. Fully typed.
pnpm add @andresclua/sliderkit @andresclua/sliderkit-plugins Everything you need, nothing you don't
Start with the core. Add what you need. Tree-shake the rest.
Lightweight core
The engine is tiny. Import only what you use — plugins, effects and WebGL are fully optional extras.
Fully accessible
ARIA roles, live regions, roledescription, keyboard navigation, and prefers-reduced-motion out of the box.
6 CSS effects
Fade, cube, coverflow, flip, cards, creative — all pure CSS, no JavaScript animations required.
WebGL renderer
Powered by OGL. Displacement maps, RGB shift, pixel dissolve, parallax depth, and custom GLSL shaders.
13 plugins
Autoplay, arrows, pagination, thumbnails, mousewheel, lazy load, parallax, virtual slides, and more.
Touch & drag
Native-feeling swipe gestures with configurable threshold, angle, and resistance on touch and mouse.
Responsive
Change any option at any viewport width. ResizeObserver powered — no window resize hacks.
TypeScript strict
Fully typed API, typed event payloads, typed plugin interface. No any escape hatches anywhere.
Up and running
in seconds
Drop in the markup, pass options, done. Full plugin composition with type-safe callbacks, no boilerplate.
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, autoplay }
from '@andresclua/sliderkit-plugins'
const slider = new Slider('#hero-slider', {
slidesPerPage: 1,
loop: true,
speed: 420,
plugins: [
arrows(),
pagination({ type: 'dots', clickable: true }),
autoplay({ delay: 3000, pauseOnHover: true }),
],
on: {
afterSlideChange: ({ index }) => {
console.log('Slide:', index)
},
},
})One ecosystem, four packages
Import only what your project needs. Everything is tree-shaken by default.
@andresclua/sliderkit The slider engine. Touch, drag, keyboard, infinite loop, breakpoints, a11y, events, and plugin system.
@andresclua/sliderkit-plugins 13 UI plugins. Arrows, pagination, autoplay, thumbnails, mousewheel, lazy load, parallax, and more.
@andresclua/sliderkit-effects 6 CSS transition effects. Fade, cube, coverflow, flip, cards, and creative — zero JS animations.
@andresclua/sliderkit-webgl OGL-powered WebGL renderer. 4 built-in shader effects plus a custom GLSL API with automatic fallback.
Free, open source, and yours to use.
SliderKit is MIT-licensed. If it saves you time, consider sponsoring on GitHub Sponsors and help keep it maintained.