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 |