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

CCarousel

jsx

import { CCarousel } from '@coreui/vue'

Props

Property	Default	Type
activeIndex	`0`	`number`
index of the active item. The carousel follows post-mount changes and slides to the new index.
autoplay6.0.0+	-	`boolean`
Whether the carousel cycles automatically from mount. Autoplay turns off for good once the user interacts with the carousel.
center6.0.0+	-	`boolean`
Snap the active slide to the middle of the viewport instead of its start.
controls	-	`boolean`
Adding in the previous and next controls.
dark	-	`boolean`
Add darker controls, indicators, and captions.
ends6.0.0+	`'loop'`	`string`
What happens past the ends: `loop` continues seamlessly where the layout allows, `wrap` jumps to the other end, `stop` disables the matching control at each end.
indicators	-	`boolean`
Adding indicators at the bottom of the carousel for each item.
interval	`5000`	`number`
The amount of time to delay between automatically cycling an item.
keyboard6.0.0+	`true`	`boolean`
Whether the carousel should react to ArrowLeft/ArrowRight keys.
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.
pauseLabel6.0.0+	`'Pause carousel'`	`string`
`aria-label` of the play/pause control while autoplay is running.
playLabel6.0.0+	`'Play carousel'`	`string`
`aria-label` of the play/pause control while autoplay is stopped.
playPause6.0.0+	-	`boolean`
Render a play/pause control so users can stop an autoplaying carousel (WCAG 2.2.2).
transition	`'slide'`	`string`
Set type of the transition.
variableWidth6.0.0+	-	`boolean`
Let each slide keep its own width instead of the computed track fraction.

Events

Event name
slid
Callback fired when a slide transition end. `active` `number` `direction` `string`
slide
Callback fired when a slide transition starts. `active` `number` `direction` `string`

CCarouselCaption

jsx

import { CCarouselCaption } from '@coreui/vue'

CCarouselItem

jsx

import { CCarouselItem } from '@coreui/vue'

Property	Default	Type
interval	`undefined`	`number`
The amount of time to delay between automatically cycling this item.