Skip to Content
ComponentsImage Carousel

Image Carousel

0px
  • slide-0-0
  • slide-0-1
  • slide-0-2
  • slide-0-3
  • slide-0-4
  • slide-0-5
  • slide-0-6
  • slide-0-7
  • slide-1-0
  • slide-1-1
  • slide-1-2
  • slide-1-3
  • slide-1-4
  • slide-1-5
  • slide-1-6
  • slide-1-7

Props

NameTypeDefault
speednumber

Base speed factor of the auto-scrolling motion. Higher values make the carousel scroll faster.

1
hoverSlowdownRationumber

Ratio applied to slow down the carousel when hovering. 0.5 = half speed, 1 = same speed, >1 = faster on hover.

0.5
autoSlideboolean

Whether the carousel should automatically slide without user interaction. If false, it stays static until dragged.

true
images{ url: string; }[]

List of image objects to display in the carousel. Each must contain a valid url property.

exampleImages (imported from ./utils/demo-images)
slideWidthstring

The width of each slide item. Accepts any valid CSS size unit (e.g. "120px", "10rem", "20%").

"8.3vw"
slideGapstring

The horizontal gap between slides. Accepts any valid CSS size unit.

"35px"
direction1 | -1

Scroll direction of the carousel. 1 = scrolls right→left, -1 = scrolls left→right.

1
Last updated on
Perxel UIInfinite Grid