Leave Yamada UI a star
StarCarousel is a component that displays multiple elements like a slideshow.
Description
The alignment of the carousel.
Type
AlignmentOptionType | [AlignmentOptionType | { [x: string]: AlignmentOptionType | undefined; base?: AlignmentOptionType | undefined; ... 4 more ...; xl?: AlignmentOptionType | undefined; } | undefined, AlignmentOptionType | ... 1 more ... | undefined] | { ...; }Default
'center'Description
If true, the carousel will be autoplay.
Type
UIValue<boolean>Default
falseDescription
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Description
Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
Type
ScrollContainOptionType | [ScrollContainOptionType | { [x: string]: ScrollContainOptionType | undefined; ... 5 more ...; xl?: ScrollContainOptionType | undefined; } | undefined, ScrollContainOptionType | ... 1 more ... | undefined] | { ...; }Default
''Description
Props for next of the carousel control element.
Type
CarouselControlPropsDescription
Props for previous of the carousel control element.
Type
CarouselControlPropsDescription
Props for carousel control element.
Type
CarouselControlPropsDescription
Ref of the resizable item callback.
Type
RefObject<EmblaCarouselType | undefined>Description
The initial index of the carousel slide.
Type
numberDefault
0Description
The number for the autoplay interval of the carousel.
Type
UIValue<number>Default
4000Description
If true, momentum scrolling will be enabled.
Type
UIValue<boolean>Default
falseDescription
If true, carousel can be scrolled with mouse and touch interactions.
Type
UIValue<boolean>Default
trueDescription
Set scroll duration when triggered by any of the API methods. Higher numbers enables slower scrolling. Drag interactions are not affected because duration is then determined by the drag force.
Type
UIValue<number>Default
25Description
If true, gap will be treated as part of the carousel slide size.
Type
UIValue<boolean>Default
trueDescription
The index of the carousel slide.
Type
numberDescription
Props for carousel indicators element.
Type
CarouselIndicatorsPropsDescription
Props for carousel inner element.
Type
HTMLUIPropsDescription
Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
Type
number | number[] | [number | number[] | { [x: string]: number | number[] | undefined; base?: number | number[] | undefined; "2xl"?: number | number[] | undefined; lg?: number | number[] | undefined; md?: number | ... 1 more ... | undefined; sm?: number | ... 1 more ... | undefined; xl?: number | ... 1 more ... | un...Default
0Description
If true, infinite looping.
Automatically falls back to false if slide content isn't enough to loop.
Type
UIValue<boolean>Default
trueDescription
The callback invoked when carousel slide selected.
Type
(index: number) => voidDescription
A callback that return the current scroll amount when the carousel is scrolled.
Type
(progress: number) => voidDescription
The orientation of the carousel.
Type
UIValue<"horizontal" | "vertical">Default
'horizontal'Description
The size of the Carousel.
Type
"sm" | "md" | "lg" | "xl"Default
"md"Description
If true, allow the carousel to skip scroll snaps if it's dragged vigorously.
Note that this option will be ignored if the dragFree option is set to true.
Type
UIValue<boolean>Default
falseDescription
The CSS width property.
Type
UIValue<number | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 76 more ... | "xs">Description
The number of slides that should be scrolled with next or previous buttons.
Type
UIValue<number>Default
1Description
If true, autoplay will pause when the mouse entries over.
Type
UIValue<boolean>Default
trueDescription
The variant of the Carousel.
Type
stringDescription
Enables for scrolling the carousel with mouse and touch interactions.
Set this to false to disable drag events or pass a custom callback to add your own drag logic.
Type
DragHandlerOptionTypeDefault
trueDescription
Embla automatically watches the container and slides for size changes and runs reInit when any size has changed.
Set this to false to disable this behaviour or pass a custom callback to add your own resize logic.
Type
ResizeHandlerOptionTypeDefault
trueDescription
Embla automatically watches the container for added and/or removed slides and runs reInit if needed.
Set this to false to disable this behaviour or pass a custom callback to add your own slides changed logic.
Type
SlidesHandlerOptionTypeDefault
trueDescription
If true, display the carousel control buttons.
Type
UIValue<boolean>Default
trueDescription
If true, display the carousel indicator buttons.
Type
UIValue<boolean>Default
trueDescription
If true, the button is represented as active.
Type
booleanDefault
falseDescription
If true, disable ripple effects when pressing a element.
Type
booleanDefault
falseDescription
If true, the button is full rounded. Else, it'll be slightly round.
Type
booleanDefault
falseDescription
The icon to be used in the button.
Type
ReactElement<any, string | JSXElementConstructor<any>>Description
If true, the button is represented as active.
Deprecated
Use active instead.
Type
booleanDefault
falseDescription
If true, the button is disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseDescription
If true, the loading state of the button is represented.
Deprecated
Use loading instead.
Type
booleanDefault
falseDescription
If true, the button is full rounded. Else, it'll be slightly round.
Deprecated
Use fullRounded instead.
Type
booleanDefault
falseDescription
If true, the loading state of the button is represented.
Type
booleanDefault
falseDescription
The custom carousel indicator to use.
Type
FC<{
index: number
selected: boolean
isSelected?: boolean | undefined
}>Type
numberDescription
The CSS width property.
Type
UIValue<number | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 76 more ... | "xs">Edit this page on GitHub