Parallax Carousel

A draggable image carousel with a smooth parallax feel

parallax-carousel-tw

Customize

Tweak the props live

Geometry

Image Width360

Image Height480

Gap32

Border Radius16

Motion

Parallax Intensity0.4

UV Scale0.85

Lerp0.08

Wheel Sensitivity1

Drag Sensitivity1.4

Behaviour

Loop

Autoplay Speed (px/s)40

Pause On Hover

Show 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

Default:420

imageHeightnumber

Plane height in CSS pixels

Default:560

gapnumber

Horizontal gap between planes in CSS pixels

Default:32

parallaxIntensitynumber

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

Default:0.4

uvScalenumber

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

Default:0.85

lerpnumber

Smoothing factor for the scroll lerp (0–1)

Default:0.08

wheelSensitivitynumber

Multiplier on wheel deltas

Default:1

dragSensitivitynumber

Multiplier on pointer-drag deltas

Default:1.4

loopboolean

Loop endlessly horizontally (planes wrap around)

Default:false

borderRadiusnumber

Border radius applied to each plane in CSS pixels

Default:16

autoplaySpeednumber

Idle drift speed in CSS px/s when not interacting

Default:0

pauseOnHoverboolean

Pause autoplay while the cursor is over the carousel

Default:true

showProgressboolean

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

Default:true

classNamestring

Additional CSS classes for the container

Default:""

refParallaxCarouselRef

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

Default:undefined