Endless Carousel
Image carousel wrapped around a 3D cylinder.
Usage
import { EndlessCarousel } from '@/components/ui/endless-carousel'
<EndlessCarousel />
// Your own images and motion
<EndlessCarousel
className="h-[480px]"
items={[
{ src: '/shots/one.webp', alt: 'Serum on stone', width: 1200, height: 1600 },
{ src: '/shots/two.webp', alt: 'Cream tube', href: '/products/cream', caption: 'Day cream' },
{ src: '/shots/three.webp', alt: 'Dropper bottle' },
]}
count={16}
speed={-0.08}
pauseOnHover
camera={{ yaw: 20, fov: 62 }}
fog={{ color: '#FAF5F5', near: 14, far: 34 }}
/>
Install
pnpm dlx shadcn@latest add @pastaui-pro/endless-carouselnpx shadcn@latest add @pastaui-pro/endless-carouselyarn dlx shadcn@latest add @pastaui-pro/endless-carouselbunx --bun shadcn@latest add @pastaui-pro/endless-carouselSource
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { src: string; alt: string; width?: number; height?: number; href?: string; caption?: string }[] | = 12 gallery images | Images around the cylinder. They repeat to fill count; repeats are hidden from assistive tech. href turns a card into a link, caption adds a label under it. |
| count | number | = 14 | Cards around the full circle (at least the number of items). |
| radius | number | = 12 | Cylinder radius in scene units. |
| itemWidth | number | = 5.3 | Card width in scene units, measured along the curve. |
| itemHeight | number | = 7.6 | Card height in scene units. |
| speed | number | = 0.05 | Auto-rotation in radians per second (one turn in about 2 minutes). Negative reverses the direction. |
| damping | number | = 14 | How quickly the rotation catches up to drags. Lower is floatier. |
| dragSensitivity | number | = 0.005 | Radians of rotation per pixel dragged. |
| startAngle | number | = 0 | Initial rotation in degrees. |
| camera | { x?: number; y?: number; z?: number; yaw?: number; fov?: number } | = { x: 5, y: 0.5, z: 11, yaw: 24, fov: 58 } | Camera position, yaw in degrees, and vertical field of view in degrees. |
| fog | { color?: string; near?: number; far?: number } | false | = { color: '#000000', near: 16, far: 38 } | Distance fade toward a color, like three.js linear fog. Pass false to turn it off. |
| segments | number | = 6 | Vertical slices per card used to bend it along the curve. Higher is smoother. |
| autoPlay | boolean | = true | Rotate on its own. Always off when the user prefers reduced motion. |
| pauseOnHover | boolean | = false | Pause auto-rotation while a mouse is over the carousel. |
| draggable | boolean | = true | Rotate by dragging with mouse, touch, or pen. Arrow keys turn it while a control inside has focus. |
| showControls | boolean | = true | Show the pause/play button while auto-rotation can run. |
| label | string | = 'Image carousel' | Accessible name for the carousel region. |
| className | string | = — | Additional classes. The carousel needs a height; it defaults to h-[36rem]. |