3D Slider

A responsive cascaded card slider driven by direct DOM transforms - wheel, drag, and touch without re-rendering on every frame. Pass items or use the bundled demo images.

Default

Cascaded stack with rotate + translate. Scroll the wheel or drag to scrub; click a card to snap it to center.

Loading…

Installation

CLI

npx @sonojs/ui@latest add 3d-slider

Usage

Demo images install under components/carousels/3d-slider/images/ and are imported by the defaults. Pass your own items when you replace them.

page.tsx

"use client"

import { ThreeDSlider } from "@/components/carousels/3d-slider"

export default function Page() {
  return <ThreeDSlider className="w-full" />
}

Props

Prop	Type	Default	Description
items	ThreeDSliderItem[]	bundled images	Cards with `title`, `num`, and `imageUrl`. Defaults to static imports from `./images/`.
speedWheel	number	0.04	Wheel delta multiplier.
speedDrag	number	-0.15	Drag delta multiplier (typically negative).
onItemClick	(item, index) => void	-	Fires when a card is clicked (also snaps to that card).
containerStyle	CSSProperties	-	Inline styles on the stage.
className	string	-	Extra classes on the stage.