Carousel V2 #
This is a new version of carousel component. It has better performance and more features. We recommend to use this version instead of old one.
Examples #
Default #
Ratio #
The ratio prop allows you to set the aspect ratio of the carousel.
Height #
If you need specific height instead of ratio, you can use height prop.
Arrow buttons #
Arrow buttons allow user switch to next or previous slide. Can be hidden by setting arrows prop to false.
Indicator buttons #
Indicators (or dots) used to quickly change slide by it's index. Can be hidden by setting indicators prop to false.
Group #
VaCarouselGroup component allows you to group slides. This way you can create a carousel with multiple slides per view. You can set per-group prop to define how many slides will be shown in group.
Slots #
Slots allow you to customize carousel component.
Infinite #
By default carousel can be scrolled infinite. This means that after last slide first will be shown. You can disable this behavior by setting infinite prop to false.
Autoscroll #
Autoscroll animation. You can set autoscroll prop to true to enable autoscroll. You can also set autoscroll-interval prop to define time in ms between each slide change.
Fade #
Additional carousel slide switch effect. You can set effect prop to fade to enable fade effect. You can also set autoscroll prop to true to enable autoscroll.
Swipe #
The swipable prop enables swipe behavior for the component.
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| ariaGoToSlideLabel | The aria-label of go to slide button. |
|
|
| ariaLabel | The aria-label of carousel. |
|
|
| ariaNextLabel | The aria-label of next button. |
|
|
| ariaPreviousLabel | The aria-label of previous button. |
|
|
| ariaSlideOfLabel | The aria-label of the slide. |
|
|
| arrows | Show or hide next and previous button. |
|
|
| autoscroll | Enable autoscroll animation. |
|
|
| autoscrollInterval | Time in |
|
|
| autoscrollPauseDuration | Pause animation duration in |
|
|
| color | Color of the component (theme string or |
|
|
| effect | Slide change effect. Can be |
|
|
| indicators | Show or hide indicators at the bottom of slider |
|
|
| indicatorTrigger | Event which will trigger indicator to change slide |
|
|
| infinite | If true, after last slide first will be shown. |
|
|
| modelValue | Slide index to be shown. |
|
|
| preset | Named preset combination of component props. |
| - |
| stateful | Add possibility to work with component without setting |
|
|
| vertical |
|
|
Events #
| Name | Description |
|---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Slots #
| Name | Description |
|---|---|
default | Carousel slides |
indicator | Custom style for indicator button |
next-arrow | Custom style for next button |
prev-arrow | Custom style for previous button |