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 | 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  | 
 | 
 | 
| crossorigin | Proxies the  | 
 | - | 
| decoding | Proxies the  | 
 | - | 
| draggable | Proxies the  | 
 | 
 | 
| effect | Slide change effect | 
 | 
 | 
| fadeKeyframe | Custom keyframe name for fade animation | 
 | 
 | 
| fallbackIcon | Shows an icon if image failed to load or src doesn't specified. | 
 | - | 
| fallbackRender | Allows to use render function to render custom contents if image failed to load or src doesn't specified | 
 | - | 
| fallbackSrc | Shows an alternative image if original image failed to load or src doesn't specified. | 
 | - | 
| fallbackText | Shows an alternative text if image failed to load or src doesn't specified. | 
 | - | 
| fetchpriority | Proxies the  | 
 | 
 | 
| fit | Proxies the  | 
 | 
 | 
| height | Slider height. Can be any valid CSS height. | 
 | 
 | 
| 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. | 
 | 
 | 
| items | List of slide items. Can be any array. Default item should be an image src or object containing  | 
 | - | 
| lazy | Enables lazy load for the image of the component. | 
 | 
 | 
| loading | Indicates that something is loading (spinner icon). | 
 | - | 
| maxWidth | Maximal the width of the image of the component | 
 | 
 | 
| modelValue | Slide index to be shown. | 
 | 
 | 
| placeholderSrc | 
 | 
 | 
 | 
| preset | Named preset combination of component props. | 
 | - | 
| ratio | Aspect ratio of the component's wrapper. | 
 | - | 
| referrerpolicy | Proxies the  | 
 | - | 
| sizes | Proxies the  | 
 | 
 | 
| srcset | Proxies the  | 
 | 
 | 
| stateful | Add possibility to work with component without setting  | 
 | 
 | 
| swipable | Enables swiping behavior. | 
 | 
 | 
| swipeDirection | Allowed directions for swiping:  | 
 | 
 | 
| swipeDistance | Distance in  | 
 | 
 | 
| title | Proxies the  | 
 | 
 | 
| vertical | Change slider scroll orientation. | 
 | 
 | 
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 |