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 |
---|---|---|---|
aria-go-to-slide-label | The aria-label of go to slide button. |
|
|
aria-label | The aria-label of carousel. |
|
|
aria-next-label | The aria-label of next button. |
|
|
aria-previous-label | The aria-label of previous button. |
|
|
aria-slide-of-label | The aria-label of the slide. |
|
|
arrows | Show or hide next and previous button. |
|
|
autoscroll | Enable autoscroll animation. |
|
|
autoscroll-interval | Time in |
|
|
autoscroll-pause-duration | 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 |
|
|
fade-keyframe | Custom keyframe name for fade animation |
|
|
fallback-icon | Shows an icon if image failed to load or src doesn't specified. |
| - |
fallback-render | Allows to use render function to render custom contents if image failed to load or src doesn't specified |
| - |
fallback-src | Shows an alternative image if original image failed to load or src doesn't specified. |
| - |
fallback-text | 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. |
|
|
indicator-trigger | Event which will trigger indicator to change slide |
|
|
indicators | Show or hide indicators at the bottom of slider |
|
|
infinite | If true, after last slide first will be shown. |
|
|
items required | 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). |
| - |
max-width | Maximal the width of the image of the component |
|
|
model-value | Slide index to be shown. |
|
|
placeholder-src |
|
|
|
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. |
|
|
swipe-direction | Allowed directions for swiping: |
|
|
swipe-distance | Distance in |
|
|
title | Proxies the |
|
|
vertical | Change slider scroll orientation. |
|
|
Events #
Name | Description |
---|---|
update-model-value | 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 |