VerticalCarousel

A vertically-scrolling carousel with up/down navigation. Ideal for full height storytelling, vertical product tours, and mobile-first layouts.

Interactive Demo

Navigate with the up/down arrows or drag vertically to swipe.

Usage

import { VerticalCarousel } from "@mantleui/react/motion";

const slides = [
  <div key="1">Discover</div>,
  <div key="2">Customize</div>,
  <div key="3">Compose</div>,
  <div key="4">Ship</div>,
];

<VerticalCarousel slides={slides} defaultValue={0} height={400} loop />

Props

Prop	Type	Default	Description
`slides`	`ReactNode[]`	—	The slides to render.
`value`	`number`	—	Controlled current slide index.
`defaultValue`	`number`	`0`	Default current slide index (uncontrolled).
`onValueChange`	`(index: number) => void`	—	Called when the current slide changes.
`autoplay`	`boolean`	`false`	Whether the carousel auto-advances.
`interval`	`number`	`3000`	Autoplay interval in ms.
`loop`	`boolean`	`true`	Whether to wrap around at edges.
`height`	`number`	`400`	Viewport height in pixels.

slides

ReactNode[]

The slides to render.

value

number

Controlled current slide index.

defaultValue0

number

Default current slide index (uncontrolled).

onValueChange

(index: number) => void

Called when the current slide changes.

autoplayfalse

boolean

Whether the carousel auto-advances.

interval3000

number

Autoplay interval in ms.

looptrue

boolean

Whether to wrap around at edges.

height400

number

Viewport height in pixels.