Carousel #
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.
Indicator buttons #
Indicators (or dots) used to quickly change slide by it's index.
On click
On hover
Vertical #
Slots #
Slots allow you to customize carousel component.
Infinite #
Smooth scroll transition.
Autoscroll #
Autoscroll animation.
Default
Infinite
Slow
Fade #
Additional carousel slide switch effect.
Swipe #
The swipable prop enables swipe behavior for the component.
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| ariaGoToSlideLabel |
|
| |
| ariaLabel |
|
| |
| ariaNextLabel |
|
| |
| ariaPreviousLabel |
|
| |
| ariaSlideOfLabel |
|
| |
| arrows |
|
| |
| autoscroll |
|
| |
| autoscrollInterval |
|
| |
| autoscrollPauseDuration |
|
| |
| color |
|
| |
| contain |
|
| |
| crossorigin |
| - | |
| decoding |
| - | |
| draggable |
|
| |
| effect |
|
| |
| fadeKeyframe |
|
| |
| fallbackIcon |
| - | |
| fallbackRender |
| - | |
| fallbackSrc |
| - | |
| fallbackText |
| - | |
| fetchpriority |
|
| |
| fit |
|
| |
| height |
|
| |
| indicators |
|
| |
| indicatorTrigger |
|
| |
| infinite |
|
| |
| items required |
| - | |
| lazy |
|
| |
| loading |
| - | |
| maxWidth |
|
| |
| modelValue |
|
| |
| placeholderSrc |
|
| |
| preset |
| - | |
| ratio |
| - | |
| referrerpolicy |
| - | |
| sizes |
|
| |
| srcset |
|
| |
| stateful |
|
| |
| swipable |
|
| |
| swipeDirection |
|
| |
| swipeDistance |
|
| |
| title |
|
| |
| 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 | Custom style for slide item content |
indicator | Custom style for indicator button |
next-arrow | Custom style for next button |
prev-arrow | Custom style for previous button |
Css Variables #
| Name | Default Value |
|---|---|
| --va-carousel-background | var(--va-background-secondary) |
| --va-carousel-border-radius | var(--va-block-border-radius) |
| --va-carousel-box-shadow | var(--va-box-shadow) |
| --va-carousel-slides-transition | all 0.3s ease-in-out |
| --va-carousel-indicators-gap | 0.25rem |
| --va-carousel-min-height | 80px |
| --va-carousel-padding | 16px |