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 |