Vue Carousel Component API

Carousel API

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

On this page

jsx

import { CCarousel } from '@coreui/vue-pro'

Property	Default	Type
controls	-	`boolean`
Adding in the previous and next controls.
dark	-	`boolean`
Add darker controls, indicators, and captions.
index	`0`	`number`
index of the active item.
indicators	-	`boolean`
Adding indicators at the bottom of the carousel for each item.
interval	`5000`	`boolean`, `number`
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	`'hover'`	`boolean`, `string`
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.
transition	`'slide'`	`string`
Set type of the transition.
touch5.10.0+	`true`	`boolean`
Set whether the carousel should support left/right swipe interactions on touchscreen devices.
wrap	`true`	`boolean`
Set whether the carousel should cycle continuously or have hard stops.

Event name
slide
Event called when the slide transition starts.
slid
Event called when the slide transition ends.

jsx

import { CCarouselItem } from '@coreui/vue-pro'

Property	Default	Type
active	`false`	`boolean`
-
direction	`'next'`	`string`
-
interval	`false`	`boolean`, `number`
The amount of time to delay between automatically cycling an item.