FadeCarousel

A carousel that cross-fades between slides rather than sliding them. Ideal for full-bleed imagery, hero backgrounds, and softer transitions.

Interactive Demo

Autoplay is enabled — slides gently cross-fade on a 3 second cycle.

Usage

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

const slides = [
  <div key="1">Sunrise</div>,
  <div key="2">Midday</div>,
  <div key="3">Golden Hour</div>,
  <div key="4">Nightfall</div>,
];

<FadeCarousel slides={slides} defaultValue={0} autoplay interval={3000} 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.

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.