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 |