Skip to main content

Carousel

Carousel is a content browser for exploring a horizontal collection, like browsing product photos or reviewing featured projects. It supports swiping, arrows, thumbnails, and automatic playback.

Import

import { Carousel } from '@vortexlabs/vortex';
import type { CarouselProps } from '@vortexlabs/vortex';

Other links

Carousel

Carousel props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`onChange`	`callback`	No default value
`ariaLabel`	`string`	No default value
`swipeDisabled`	`boolean`	No default value
`itemsPerView`	`number`	No default value
`itemsPerScroll`	`union`	`auto`
`lazyMount`	`boolean`	`false`
`renderStatusText`	`callback`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value
`value`	`string`	No default value
`defaultValue`	`string`	No default value
`autoPlay`	`boolean`	`false`
`autoPlayInterval`	`number`	`5000`
`playLabel`	`string`	`Start slideshow`
`pauseLabel`	`string`	`Pause slideshow`

Carousel.Viewport

Carousel.Viewport props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`gap`	`number`	`4`
`borderRadius`	`union`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

Carousel.Item

Carousel.Item props
Prop	Type	Default	Attributes
`value`	`string`	No default value
`width`	`union`	No default value
`children`	`React.ReactNode`	No default value
`placeholder`	`React.ReactNode`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

Carousel.Controls

Carousel.Controls props
Prop	Type	Default	Attributes
`position`	`union`	`external`
`arrows`	`union`	`visible`
`variant`	`union`	`secondary`
`size`	`union`	`md`
`rounded`	`boolean`	`false`
`previousIcon`	`IconProps["src"]`	`ChevronLeft`
`nextIcon`	`IconProps["src"]`	`ChevronRight`
`previousAriaLabel`	`string`	No default value
`nextAriaLabel`	`string`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value

Carousel.Indicator

Carousel.Indicator props
Prop	Type	Default	Attributes
`className`	`union`	No default value
`attributes`	`object`	No default value

Carousel.Thumbnails

Carousel.Thumbnails props
Prop	Type	Default	Attributes
`ariaLabel`	`string`	No default value
`children`	`React.ReactNode`	No default value
`gap`	`number`	`2`
`scrollbar`	`union`	`hover`
`className`	`union`	No default value
`attributes`	`object`	No default value
`scrollableAttributes`	`object`	No default value

Carousel.Thumbnail

Carousel.Thumbnail props
Prop	Type	Default	Attributes
`value`	`string`	No default value
`ariaLabel`	`string`	No default value
`children`	`React.ReactNode`	No default value
`width`	`CardProps["width"]`	`80px`
`padding`	`CardProps["padding"]`	`2xs`
`borderRadius`	`union`	`sm`
`className`	`union`	No default value
`attributes`	`object`	No default value