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.
3 CSS effects
Fade, flip, and clip-path — all pure CSS, no JavaScript animations required.
WebGL renderer
Raw WebGL, no dependencies. Displacement map warp, RGB-shift chromatic aberration, radial reveal, and custom GLSL shaders.
9 plugins
Autoplay, arrows, pagination, thumbnails, mouse wheel, keyboard, progress, accessibility, and hooks.
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', {
items: 1,
loop: true,
speed: 420,
plugins: [
arrows(),
pagination({ type: 'dots', clickable: true }),
autoplay({ delay: 3000, pauseOnHover: true }),
],
})
slider.on('indexChanged', ({ displayIndex }) => {
console.log('Slide:', displayIndex)
})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 9 UI plugins. Arrows, pagination, autoplay, thumbnails, mouse wheel, keyboard, progress, accessibility, and hooks.
@andresclua/sliderkit-effects 6 CSS transition effects. Fade, cube, coverflow, flip, cards, and creative — zero JS animations.
@andresclua/sliderkit-webgl Raw WebGL renderer. 3 built-in shader effects (displacement, RGB-shift, radial) 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.