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

String

"$t:goSlide"

ariaLabel

String

"$t:carousel"

ariaNextLabel

String

"$t:goNextSlide"

ariaPreviousLabel

String

"$t:goPreviousSlide"

ariaSlideOfLabel

String

"$t:slideOf"

arrows

Boolean

true

autoscroll

Boolean

false

autoscrollInterval

Number

1000

autoscrollPauseDuration

Number

2000

color

String

"primary"

contain

Boolean

false

crossorigin

String

-

decoding

String

-

draggable

Boolean

true

effect

String

"transition"

fadeKeyframe

String

"va-carousel-fade-appear 1s"

fallbackIcon

String

-

fallbackRender

Function

-

fallbackSrc

String

-

fallbackText

String

-

fetchpriority

String

"auto"

fit

String

"cover"

height

String

"300px"

indicators

Boolean

true

indicatorTrigger

String

"click"

infinite

Boolean

false

items

Array

-

lazy

Boolean

false

loading

String

-

maxWidth

Number

0

modelValue

Number

0

placeholderSrc

String

""

preset

String

-

ratio

Number

-

referrerpolicy

String

-

sizes

String

""

srcset

String

""

stateful

Boolean

false

swipable

Boolean

false

swipeDirection

String

"all"

swipeDistance

Number

75

title

String

""

vertical

Boolean

false

Events #

NameDescription

update:modelValue

The event is triggered when the component needs to change the model. Is also used by 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