Parallax Carousel

A draggable image carousel with parallax

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

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() }