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 minimal slider setup — one slide at a time, loop enabled, touch and keyboard navigation out of the box. Start here if you're new to the library; every other demo builds on top of this.
- Non-loop Linear slider that stops at the first and last slide. Arrows auto-disable at the boundaries. Use this when the sequence has a clear start and end — e.g. a step-by-step wizard, an onboarding flow, or a product gallery where wrapping around would be confusing.
- Rewind Like non-loop but with a twist: reaching the last slide and pressing Next jumps back to the first (and vice versa) in a single animated step — no clones, no infinite loop. Good for carousels that feel bounded but still allow continuous browsing.
- Infinite Loop Enable seamless infinite navigation with loop: true. Boundary slides are cloned in the DOM so every transition — including last→first and first→last — looks continuous with no visible jump.
- Start Index Open the slider at any slide index with `startIndex` (0-based). Useful for deep-linking to a specific item, restoring a saved position, or showing a "featured" slide on load without user interaction.
- Vertical Top-to-bottom track instead of the default horizontal one. Set `direction: "vertical"` and give the container a fixed height. Supports touch swipe up/down, arrow keys, and the arrows plugin. Ideal for full-page scroll experiences or timeline layouts.
- Mouse Drag Enable `mouseDrag: true` to let desktop users click and drag the slider just like a touch swipe. Add `grabCursor: true` to show a grab cursor on hover. Great for image galleries or any slider where mouse users expect the same feel as touch.
- Gutter & Edge Padding `gutter` sets a fixed pixel gap between slides. `edgePadding` shrinks each slide so adjacent ones peek in from the sides, hinting that there is more to scroll. Use together for card-style multi-slide layouts.
- Responsive Pass a `breakpoints` map to change any option at specific container widths — `slidesPerPage`, `gutter`, `loop`, and more. The slider watches its own width via ResizeObserver, so it reacts to container resizes too, not just window resizes.
- Auto Height The container animates its height to match each slide's natural height on every slide change. Use this when slides contain variable-length content like text blocks, accordions, or dynamic data — no need to set a fixed height.
- Freeze / Disable Set `freezable: true` and the slider automatically disables itself when all slides fit on one page at once — arrows, pagination, and drag all disappear because there is nothing to scroll. The classic use case is a responsive card row: on desktop you show 4 cards per page and only have 4 items, so the slider freezes; on mobile you show 1 per page, so it wakes back up. You can also call `disable()` and `enable()` manually for conditional cases like a loading state or a locked step in a wizard.
Plugins
- Arrows Adds prev/next buttons. By default they are auto-created and injected inside the container. Pass `prevEl` / `nextEl` selectors to use your own buttons anywhere in the DOM — useful when the design places arrows outside the slide area.
- Pagination — Dots The classic dot row. Each dot maps to one slide (or one page when `slidesPerPage > 1`). Set `clickable: true` to let users jump directly to any slide. The active dot scales up and changes colour.
- Pagination — Fraction Shows a plain-text "2 / 5" counter. With `slidesPerPage > 1` the numerator tracks pages rather than individual slides. Useful when you want position context without the visual weight of dots — common in fullscreen heroes or image lightboxes.
- Pagination — Progress A horizontal bar below the slider that fills proportionally as you advance. Communicates progress at a glance without taking up per-slide space. Works best in linear (non-loop) sliders with a clear start and end.
- Pagination — Dynamic Like dots, but nearby bullets shrink progressively by distance from the active one. Keeps the pagination compact when there are many slides — dots don't overflow the container. Enable with `type: "dynamic"` and `dynamicBullets: true`.
- Pagination — Custom Provide a `renderBullet` function to return any HTML string for each bullet. Use it to render slide thumbnails, numbers, or icons as navigation — complete control over markup while the active state is still managed for you.
- Autoplay Auto-advances every N milliseconds. Set `pauseOnHover: true` to pause when the user moves over the slider. Call `slider.play()` and `slider.pause()` for manual control — handy for a play/pause button in hero banners or background slideshows.
- Thumbnails Renders a row of thumbnail previews below the main slider, always highlighting the active one. Click any thumbnail to jump directly to that slide. Ideal for photo galleries or product image carousels where users want to see all available images at a glance.
- Progress Bar A thin bar pinned to the top edge of the slider that fills proportionally as you advance. Less obtrusive than dot pagination — a good choice for hero sliders where you want minimal UI but still want to signal how many items remain.
- Slide Counter Injects an overlay badge in the top-right corner showing "current / total" (e.g. "2 / 5"). No extra HTML needed — the plugin creates and updates the element. Useful in fullscreen or edge-to-edge sliders where you need position context without a dot row.
- Mouse Wheel Lets users scroll through slides with the mouse wheel or trackpad. `forceToAxis: true` intercepts only horizontal (or vertical) scroll, so vertical page scroll still works normally outside the slider. A built-in debounce prevents accidentally skipping multiple slides.
- Lazy Load Images use `data-src` instead of `src` and are only loaded when their slide is about to enter the viewport (via IntersectionObserver). Reduces initial page weight significantly for sliders with many images. Set `rootMargin` to start loading a slide or two ahead.
- Parallax CSS Any element inside a slide with `data-parallax` moves at a fraction of the slide's speed, creating a sense of depth. Set the `depth` factor (0–1) to control intensity. Pure CSS transforms — no canvas, no WebGL required.
- Virtual Slides Only the active slide ± N neighbours are rendered in the DOM; the rest are placeholders. Essential for large datasets (hundreds of slides) or dynamically generated content where mounting everything at once would hurt performance.
Effects CSS
- Fade Slides stack absolutely on top of each other and cross-fade with an opacity transition instead of scrolling sideways. Works best with `slidesPerPage: 1`. A clean, minimal choice for hero banners or testimonial sliders.
- Cube Slides become the six faces of a 3D cube that rotates on each transition. Eye-catching but deliberate — works best with bold, full-bleed visuals and a slow `speed`. Pure CSS perspective, no WebGL.
- Coverflow Renders multiple slides simultaneously with depth and 3D rotation around the Y axis, mimicking the iTunes coverflow. Combine with `slidesPerPage: 3` and `edgePadding` for the best result. Controlled via `rotate` and `depth` options.
- Flip Each slide transition looks like flipping a physical card along the horizontal axis. Works with `slidesPerPage: 1`. Good for "before / after" comparisons or flashcard-style UIs.
- Cards Slides stack like a physical deck of cards with slight rotation offsets. The top card sweeps away on each transition to reveal the next one. Great for testimonials, pricing tiers, or any content that benefits from a "stack" metaphor.
- Creative Defines a custom transform (translate, rotate, scale, opacity) for each slide position relative to the active one — previous, active, and next can each animate differently. Use this to build any transition that the other effects don't cover.
Lifecycle
- Boostify + GSAP boostify.scroll({ distance: 300 }) fires once the user scrolls 300 px. @andresclua/sliderkit, @andresclua/sliderkit-plugins and gsap are all absent from the initial bundle — fetched in parallel inside the async callback. Two animations: staggered entrance on arrival, side-slide on navigation.
- GSAP Hooks Use beforeSlideChange and afterSlideChange to drive GSAP animations — staggered text reveals on a hero image slider, and per-element card entrances on a multi-slide layout.
- Destroy & Rebuild `destroy()` removes all DOM mutations, event listeners, and plugin state — the HTML returns to its original form. `rebuild()` re-initializes the instance, optionally with a new config object. Useful for framework unmount/remount cycles or switching between mobile and desktop layouts.
- getInfo() Returns a live snapshot of the slider state: current index, total slides, `isBeginning`, `isEnd`, active breakpoint, and more. Call it at any time or listen for events and call it in the handler to drive external UI — counters, breadcrumbs, custom progress bars.
- Events on/off Subscribe to slider events with `slider.on(eventName, handler)` and unsubscribe with `slider.off(eventName, handler)` — at any point after initialization, not just in the options object. Useful for conditionally listening based on app state without rebuilding the slider.
WebGL
- Displacement A greyscale displacement map texture distorts the slide image on transition using a GLSL fragment shader. The intensity and direction of the warp follow the map's luminance values — swap the texture to completely change the feel of the transition.
- RGB Shift Separates the red, green, and blue channels and offsets them in different directions, producing a chromatic aberration or glitch aesthetic on transition. Subtle at low values, intense at high ones — control it via the `amount` uniform.
- Pixel Dissolve Uses a noise function to dissolve the outgoing slide into random pixels before the incoming one materialises. The threshold sweeps across the noise field over time, creating a organic, non-linear dissolve without any pre-baked textures.
- Parallax Hover Mouse position is passed as a uniform to a shader that displaces depth layers at different rates, creating a parallax illusion without moving the camera. Each slide can define its own layer configuration. No slide transition needed — the effect runs continuously on mouse move.
- Custom Shader A minimal boilerplate for writing your own GLSL transition shader from scratch. The setup handles canvas sizing, texture binding, and the progress uniform — you only need to write the fragment shader logic that blends `uTexture0` and `uTexture1` based on `uProgress`.