Parallax Carousel

A draggable image carousel with a smooth parallax feel

parallax-carousel-tw

Customize

Image Width

360

Image Height

480

Gap

Border Radius

Parallax Intensity

0.40

UV Scale

0.85

Lerp

0.08

Wheel Sensitivity

1.0

Drag Sensitivity

1.4

Loop

Autoplay Speed (px/s)

Pause On HoverShow Progress

Props

Name	Type	Default	Description
`images`	string[]	`[]`	Ordered list of image URLs (required)
`imageWidth`	number	`420`	Plane width in CSS pixels
`imageHeight`	number	`560`	Plane height in CSS pixels
`gap`	number	`32`	Horizontal gap between planes in CSS pixels
`parallaxIntensity`	number	`0.4`	UV-space horizontal counter-shift as planes drift from centre (0–1)
`uvScale`	number	`0.85`	Inner texture inset that gives the parallax shift room to move (0.6–1)
`lerp`	number	`0.08`	Smoothing factor for the scroll lerp (0–1)
`wheelSensitivity`	number	`1`	Multiplier on wheel deltas
`dragSensitivity`	number	`1.4`	Multiplier on pointer-drag deltas
`loop`	boolean	`false`	Loop endlessly horizontally (planes wrap around)
`borderRadius`	number	`16`	Border radius applied to each plane in CSS pixels
`autoplaySpeed`	number	`0`	Idle drift speed in CSS px/s when not interacting
`pauseOnHover`	boolean	`true`	Pause autoplay while the cursor is over the carousel
`showProgress`	boolean	`true`	Show a progress indicator at the bottom (hidden in loop mode)
`className`	string	`""`	Additional CSS classes for the container
`ref`	ParallaxCarouselRef	`undefined`	Imperative API: { scrollToIndex(i), reset() }

imagesstring[]

Ordered list of image URLs (required)

Default[]

imageWidthnumber

Plane width in CSS pixels

Default420

imageHeightnumber

Plane height in CSS pixels

Default560

gapnumber

Horizontal gap between planes in CSS pixels

Default32

parallaxIntensitynumber

UV-space horizontal counter-shift as planes drift from centre (0–1)

Default0.4

uvScalenumber

Inner texture inset that gives the parallax shift room to move (0.6–1)

Default0.85

lerpnumber

Smoothing factor for the scroll lerp (0–1)

Default0.08

wheelSensitivitynumber

Multiplier on wheel deltas

Default1

dragSensitivitynumber

Multiplier on pointer-drag deltas

Default1.4

loopboolean

Loop endlessly horizontally (planes wrap around)

Defaultfalse

borderRadiusnumber

Border radius applied to each plane in CSS pixels

Default16

autoplaySpeednumber

Idle drift speed in CSS px/s when not interacting

Default0

pauseOnHoverboolean

Pause autoplay while the cursor is over the carousel

Defaulttrue

showProgressboolean

Show a progress indicator at the bottom (hidden in loop mode)

Defaulttrue

classNamestring

Additional CSS classes for the container

Default""

refParallaxCarouselRef

Imperative API: { scrollToIndex(i), reset() }

Defaultundefined