Demos
Browse all examples. Each demo includes full HTML, CSS, and JS so you can copy-paste it directly into your project.
Core
- Base The simplest slider. Loop enabled, touch navigation out of the box.
- Non-loop Linear slider that stops at the first and last slide. Arrows auto-disable at boundaries.
- Rewind Like non-loop but reaching the last slide jumps back to the first in one animated step.
- Infinite Loop Seamless infinite navigation with loop: true. Boundary slides are cloned so every transition looks continuous.
- Start Index Open the slider at any slide index with startIndex (0-based).
- Vertical Top-to-bottom track. Set axis: "vertical" and give the container a fixed height.
- Mouse Drag Enable mouseDrag: true to let desktop users click and drag the slider.
- Gutter & Edge Padding gutter adds pixel gap between slides. edgePadding makes adjacent slides peek in from the sides.
- Responsive Pass a responsive map to change any option at specific window widths.
- Auto Height The container animates its height to match each slide's natural height on every slide change.
- Freeze / Disable The slider auto-disables when all slides fit on one page. You can also call disable() and enable() manually.
- Autoplay Auto-advances on a fixed interval. Pauses on hover, focus, touch, and drag.
- Accessibility WAI-ARIA carousel pattern — roles, roledescriptions, and live slide labels.
- Center Mode center:true keeps the active slide centred in the viewport. Adjacent slides peek in from both sides.
- Slide By Page slideBy:"page" advances the whole visible page at once instead of one slide at a time.
- Mouse Wheel Navigate with the mouse wheel or trackpad. A cooldown prevents skipping slides mid-transition.
- Keyboard Click the slider to focus it, then press ← → (or ↑ ↓ for vertical) to navigate.
- Events Navigate the slider and watch every lifecycle event fire in real time.
- Progress A bar that fills from left to right as you advance through the slides.
- Thumbs Click any thumbnail to jump to that slide. Active thumbnail updates automatically.
- Flip Slides flip on the Y axis like turning a card. Direction-aware.
- Fade Slides cross-fade instead of sliding. From @andresclua/sliderkit-effects.
- Clip Path Slides reveal with clip-path animations — wipe, circle, and diamond shapes.
- Hooks Drive GSAP animations from slider lifecycle events: onInit, beforeChange, afterChange, onDragStart, onDragEnd, onResize, beforeDestroy.
- WebGL GPU-powered transitions using raw WebGL: displacement map warp, chromatic RGB-shift aberration, and a radial-reveal custom shader.