Skip to main content

Carousel Gallery

Carousel Gallery is a widget that shows media one item at a time, such as product photos or a slideshow.

Import

import { CarouselGallery } from '@vortexlabs/vortex';
import type { CarouselGalleryProps } from '@vortexlabs/vortex';

Allied components

Other links

CarouselGallery

CarouselGallery 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
`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`

CarouselGallery.Viewport

CarouselGallery.Viewport props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`borderRadius`	`union`	`md`
`className`	`union`	No default value
`attributes`	`object`	No default value

CarouselGallery.Item

CarouselGallery.Item props
Prop	Type	Default	Attributes
`value`	`string`	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

CarouselGallery.Controls

CarouselGallery.Controls props
Prop	Type	Default	Attributes
`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

CarouselGallery.Indicator

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

CarouselGallery.Thumbnails

CarouselGallery.Thumbnails props
Prop	Type	Default	Attributes
`position`	`union`	`bottom`
`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

CarouselGallery.Thumbnail

CarouselGallery.Thumbnail props
Prop	Type	Default	Attributes
`value`	`string`	No default value
`ariaLabel`	`string`	No default value
`children`	`React.ReactNode`	No default value
`width`	`union`	`80px`
`borderRadius`	`union`	`sm`
`className`	`union`	No default value
`attributes`	`object`	No default value