Carousel

#

The aria-label of go to slide button.

String

"$t:goSlide"

The aria-label of carousel.

String

"$t:carousel"

The aria-label of next button.

String

"$t:goNextSlide"

The aria-label of previous button.

String

"$t:goPreviousSlide"

The aria-label of the slide.

String

"$t:slideOf"

Show or hide next and previous button.

Boolean

true

Enable autoscroll animation.

Boolean

false

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

Number

1000

Pause animation duration in ms after user changed slide.

Number

2000

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

String

"primary"

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

String

-

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

String

-

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

Boolean

true

Slide change effect

String

"transition"

Custom keyframe name for fade animation

String

"va-carousel-fade-appear 1s"

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

String

-

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

Function

-

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

String

-

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

String

-

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

String

"auto"

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

String

"cover"

Slider height. Can be any valid CSS height.

String

"300px"

Event which will trigger indicator to change slide

String

"click"

Show or hide indicators at the bottom of slider

Boolean

true

If true, after last slide first will be shown.

Boolean

false

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

-

Enables lazy load for the image of the component.

Boolean

false

Indicates that something is loading (spinner icon).

String

-

Maximal the width of the image of the component

Number

0

Slide index to be shown.

Number

0

src value for the placeholder image of the component.

String

""

Named preset combination of component props.

String

-

Aspect ratio of the component's wrapper.

Number

-

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

String

-

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

String

""

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

String

""

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

Boolean

false

Enables swiping behavior.

Boolean

false

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

String

"all"

Distance in px considered sufficient for the swipe event.

Number

75

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

String

""

Change slider scroll orientation.

Boolean

false

update-model-value

The event is triggered when the component needs to change the model. Is also used by v-model

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