3D Image Carousel

A responsive cascade of images with depth stacking, drag or swipe navigation, optional autoplay, and arrow controls. Pass your own slides - install ships the demo images next to the component.

Default

Five-deep cascade stack with autoplay. Drag or use the arrows to step. Side plates sit grayscale until centered.

Loading…

Installation

CLI

npx @sonojs/ui@latest add 3d-image-carousel

Also needsnpm i lucide-react

Usage

Demo images install under components/carousels/3d-image-carousel/images/ and are imported by the component defaults. Pass your own slides (URLs or static imports) when you replace them.

page.tsx

"use client"

import { ThreeDImageCarousel } from "@/components/carousels/3d-image-carousel"

export default function Page() {
  return (
    <ThreeDImageCarousel
      itemCount={5}
      autoplay
      delay={4}
      className="w-full"
    />
  )
}

Props

Prop	Type	Default	Description
slides	ThreeDImageCarouselSlide[]	bundled images	Slide list with `id`, `src`, and `href`. Defaults to static imports from `./images/`.
itemCount	3 · 5	5	Visible stack depth - `3` for a compact trio, `5` for the full cascade.
autoplay	boolean	false	Advance automatically while the carousel is mounted.
delay	number	3	Seconds between autoplay steps.
pauseOnHover	boolean	true	Pause autoplay while the pointer is over the stage.
className	string	-	Extra classes on the cascade container.