React Carousel Component API
Carousel API
Limited offer ends 1st January 2025, use code 2024XMAS25 during checkout.
Explore the API reference for the React Carousel component and discover how to effectively utilize its props for customization.
CCarousel#
import { CCarousel } from '@coreui/react'// orimport CCarousel from '@coreui/react/src/components/carousel/CCarousel'| Property | Default | Type |
|---|---|---|
| activeIndex# | 0 | number |
index of the active item. | ||
| className# | - | string |
A string of all className you want applied to the base component. | ||
| controls# | - | boolean |
Adding in the previous and next controls. | ||
| dark# | - | boolean |
Add darker controls, indicators, and captions. | ||
| indicators# | - | boolean |
Adding indicators at the bottom of the carousel for each item. | ||
| interval# | 5000 | number, boolean |
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | ||
| onSlid# | - | (active: number, direction: string) => void |
Callback fired when a slide transition end. | ||
| onSlide# | - | (active: number, direction: string) => void |
Callback fired when a slide transition starts. | ||
| pause# | hover | boolean, 'hover' |
If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it. | ||
| touch#4.5.0+ | true | boolean |
Set whether the carousel should support left/right swipe interactions on touchscreen devices. | ||
| transition# | - | 'slide', 'crossfade' |
Set type of the transition. | ||
| wrap# | true | boolean |
Set whether the carousel should cycle continuously or have hard stops. | ||
CCarouselCaption#
import { CCarouselCaption } from '@coreui/react'// orimport CCarouselCaption from '@coreui/react/src/components/carousel/CCarouselCaption'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CCarouselItem#
import { CCarouselItem } from '@coreui/react'// orimport CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem'