Carousel
#

Examples
#

Default
#

Open in GitHub

Ratio
#

The ratio prop allows you to set the aspect ratio of the carousel.

Open in GitHub

Height
#

If you need specific height instead of ratio, you can use height prop.

Open in GitHub

Arrow buttons
#

Arrow buttons allow user switch to next or previous slide.

Open in GitHub

Indicator buttons
#

Indicators (or dots) used to quickly change slide by it's index.

On click
On hover
Open in GitHub

Vertical
#

Open in GitHub

Slots
#

Slots allow you to customize carousel component.

Open in GitHub

Infinite
#

Smooth scroll transition.

Open in GitHub

Autoscroll
#

Autoscroll animation.

Default
Infinite
Slow
Open in GitHub

Fade
#

Additional carousel slide switch effect.

Open in GitHub

Swipe
#

The swipable prop enables swipe behavior for the component.

Open in GitHub

Props #

NameDescriptionTypesDefault
ariaGoToSlideLabel

The aria-label of go to slide button.

String

"$t:goSlide"

ariaLabel

The aria-label of carousel.

String

"$t:carousel"

ariaNextLabel

The aria-label of next button.

String

"$t:goNextSlide"

ariaPreviousLabel

The aria-label of previous button.

String

"$t:goPreviousSlide"

ariaSlideOfLabel

The aria-label of the slide.

String

"$t:slideOf"

arrows

Show or hide next and previous button.

Boolean

true

autoscroll

Enable autoscroll animation.

Boolean

false

autoscrollInterval

Time in ms. Each autoscroll-interval next slide will be shown.

Number

5000

autoscrollPauseDuration

Pause animation duration in ms after user changed slide.

Number

2000

color

Color of the component (theme string or HEX string).

String

"primary"

crossorigin

Proxies the crossorigin attribute to the image of the component MDN.

String

-

decoding

Proxies the decoding attribute to the image of the component MDN.

String

-

draggable

Proxies the draggable attribute to the image of the component MDN.

Boolean

true

effect

Slide change effect

String

"transition"

fadeKeyframe

Custom keyframe name for fade animation

String

"va-carousel-fade-appear 1s"

fallbackIcon

Shows an icon if image failed to load or src doesn't specified.

String

-

fallbackRender

Allows to use render function to render custom contents if image failed to load or src doesn't specified

Function

-

fallbackSrc

Shows an alternative image if original image failed to load or src doesn't specified.

String

-

fallbackText

Shows an alternative text if image failed to load or src doesn't specified.

String

-

fetchpriority

Proxies the fetchpriority attribute to the image of the component MDN.

String

"auto"

fit

Proxies the object-fit attribute to the image of the component MDN.

String

"cover"

height

Slider height. Can be any valid CSS height.

String

"300px"

indicators

Show or hide indicators at the bottom of slider

Boolean

true

indicatorTrigger

Event which will trigger indicator to change slide

String

"click"

infinite

If true, after last slide first will be shown.

Boolean

true

items

List of slide items. Can be any array. Default item should be an image src or object containing src and alt. You can use item later in default slot.

Array

-

lazy

Enables lazy load for the image of the component.

Boolean

false

loading

Indicates that something is loading (spinner icon).

String

-

maxWidth

Maximal the width of the image of the component

Number

0

modelValue

Slide index to be shown.

Number

0

placeholderSrc

src value for the placeholder image of the component.

String

""

preset

Named preset combination of component props.

String

-

ratio

Aspect ratio of the component's wrapper.

Number

-

referrerpolicy

Proxies the referrerpolicy attribute to the image of the component MDN.

String

-

sizes

Proxies the sizes attribute to the image of the component MDN.

String

""

srcset

Proxies the srcset attribute to the image of the component MDN.

String

""

stateful

Add possibility to work with component without setting v-model.

Boolean

true

swipable

Enables swiping behavior.

Boolean

false

swipeDirection

Allowed directions for swiping: all, horizontal, vertical, left, right, up, down.

String

"all"

swipeDistance

Distance in px considered sufficient for the swipe event.

Number

75

title

Proxies the title attribute to the image of the component MDN.

String

""

vertical

Change slider scroll orientation.

Boolean

false

Events #

NameDescription

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

Slots #

NameDescription

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 #

NameDefault 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

Change log #