ParallaxCarousel

A full-bleed carousel with parallax backgrounds and overlay content. Perfect for hero sections, storytelling, and immersive marketing experiences.

Interactive Demo

Swipe or use the arrows to shift between scenes.

Custom icons

Pass any ReactNode to prevIcon and nextIcon to override the default chevrons.

Usage

import { ParallaxCarousel } from "@mantleui/react/motion";
import { ArrowLeft, ArrowRight } from "lucide-react";

const slides = [
  {
    image: "https://picsum.photos/1200/600?random=1",
    content: <h3>Into the Wild</h3>,
  },
  {
    image: "https://picsum.photos/1200/600?random=2",
    content: <h3>Above the Clouds</h3>,
  },
];

// Basic
<ParallaxCarousel slides={slides} defaultValue={0} loop />

// Custom icons
<ParallaxCarousel
  slides={slides}
  prevIcon={<ArrowLeft size={20} />}
  nextIcon={<ArrowRight size={20} />}
/>

// Hide arrows — rely on dots or drag
<ParallaxCarousel slides={slides} showArrows={false} />

// Hide dots
<ParallaxCarousel slides={slides} showDots={false} />

Props

Prop	Type	Default	Description
`slides`	`ParallaxSlide[]`	—	Array of slides. Each slide has an image URL and overlay content.
`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.
`showArrows`	`boolean`	`true`	Whether to show prev/next arrow buttons.
`showDots`	`boolean`	`true`	Whether to show dot indicators.
`prevIcon`	`ReactNode`	—	Custom icon for the previous button. Defaults to a chevron-left.
`nextIcon`	`ReactNode`	—	Custom icon for the next button. Defaults to a chevron-right.

slides

ParallaxSlide[]

Array of slides. Each slide has an image URL and overlay content.

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.

showArrowstrue

boolean

Whether to show prev/next arrow buttons.

showDotstrue

boolean

Whether to show dot indicators.

prevIcon

ReactNode

Custom icon for the previous button. Defaults to a chevron-left.

nextIcon

ReactNode

Custom icon for the next button. Defaults to a chevron-right.