React Carousel Component API

Carousel API

Explore the API reference for the React Carousel component and discover how to effectively utilize its props for customization.

CCarousel

jsx
import { CCarousel } from '@coreui/react-pro'
PropertyDefaultType
activeIndex-number, undefined

index of the active item.

className-string, undefined

A string of all className you want applied to the base component.

controls-boolean, undefined

Adding in the previous and next controls.

dark-boolean, undefined

Add darker controls, indicators, and captions.

indicators-boolean, undefined

Adding indicators at the bottom of the carousel for each item.

interval5000number, boolean, undefined

The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.

onSlid-((active: number, direction: string) => void), undefined

Callback fired when a slide transition end.

onSlide-((active: number, direction: string) => void), undefined

Callback fired when a slide transition starts.

pausehoverboolean, 'hover', undefined

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.

touch4.5.0+trueboolean, undefined

Set whether the carousel should support left/right swipe interactions on touchscreen devices.

transition-'slide', 'crossfade', undefined

Set type of the transition.

wraptrueboolean, undefined

Set whether the carousel should cycle continuously or have hard stops.

CCarouselCaption

jsx
import { CCarouselCaption } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the base component.

CCarouselItem

jsx
import { CCarouselItem } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the base component.

interval-number, boolean, undefined

The amount of time to delay between automatically cycling an item.