Carousel

A horizontally scrollable container for displaying a row of items. It supports drag-to-scroll, mouse wheel scrolling, and scroll shadow indicators. Items placed within the carousel should have a min-width set to prevent flex from fitting everything without overflowing.

When using the Carousel, you should set :draggable="false" on child elements to avoid conflicts with the native drag behavior during drag-to-scroll.

Source
Midnight DriveThe Neon Owls
Glass MountainsVera Lune
Parallel LinesStatic People
Ocean ProtocolDeep Format
Soft MachineElliot Marsh
Northern LightsAurora Band
City SilenceMono Block
The Long WayDrift & Co.

Props

NameDefaultType
gap's'xxs xs s m l xl xxl xxxl number
Controls the spacing between carousel items. Uses Flex gap under the hood
hideScrollbar—boolean
Hides the horizontal scrollbar and removes scrollbar gutter padding
hideShadows—boolean
Hides the left & right scroll shadow indicators
snap—boolean
Enables scroll-snap so items snap into place when scrolling stops

Slots

NamePropsDescription
default—The carousel items. Each child should have a min-width set