Config
Available Props
Prop | Default | Description |
---|---|---|
itemsToShow | 1 | count of items to showed per view (can be a fraction). |
itemsToScroll | 1 | number of slides to be scrolled |
wrapAround | false | enable infinite scrolling mode. |
snapAlign | 'center' | controls the carousel position alignment, can be 'start', 'end', 'center-[odd|even]' |
transition | 300 | sliding transition time in ms. |
autoplay | 0 | Auto play time in ms. |
breakpointMode | 'viewport' | determines how the carousel breakpoints are calculated. acceptable values: 'viewport', 'carousel' 0.5.0 |
breakpoints | null | an object to pass all the breakpoints settings. |
modelValue | 0 | index number of the initial slide. 0.1.20 |
mouseDrag | true | toggle mouse dragging 0.1.23 |
touchDrag | true | toggle pointer touch dragging 0.1.23 |
pauseAutoplayOnHover | false | toggle if auto play should pause on mouse hover 0.1.25 |
dir | ltr | controls the carousel direction. Available values 'ltr', 'rtl' 0.1.38 |
i18n | { ariaNextSlide: ...} | Used to translate and/or change aria labels and additional texts used in the carousel. 0.3.1 |
Slots
Slides/Default
Used to render the carousel items. You can use either the default slot or wrap element in slides
slot.
vue
<template>
<Carousel>
<template #slides>
<Slide v-for="slide in 10" :key="slide">
...
</Slide>
</template>
</Carousel>
</template>
Addons
Used to add display carousel addons components.
vue
<template>
<Carousel>
...
<template #addons>
<Navigation />
<Pagination />
</template>
</Carousel>
</template>
Slots Attributes
Prop | Description |
---|---|
slideWidth | the width of a single slide element. |
currentSlide | index number of the current slide. |
slidesCount | the count of all slides |
Example
vue
<template>
<Carousel>
<Slide v-for="slide in slides" :key="slide">
<div class="carousel__item">{{ slide }}</div>
</Slide>
<template #addons="{ slidesCount }">
<Navigation v-if="slidesCount > 1" />
</template>
</Carousel>
</template>
I18n
Available keys:
Key | Defaults | Description |
---|---|---|
ariaNextSlide | "Navigate to next slide" | Sets title and aria-label for the “Next” navigation button. |
ariaPreviousSlide | "Navigate to previous slide" | Sets title and aria-label for the “Previous” navigation button. |
ariaNavigateToSlide | "Navigate to slide {slideNumber}" | Sets title and aria-label for pagination buttons to select a slide. |
ariaGallery | "Gallery" | Used as the aria-label for the main carousel element, indicating purpose. |
itemXofY | "Item {currentSlide} of {slidesCount}" | Provides screen readers with the current slide’s position in the sequence. |
iconArrowUp | "Arrow pointing upwards" | Sets title and aria-label for the upward-pointing arrow SVG icon. |
iconArrowDown | "Arrow pointing downwards" | Sets title and aria-label for the downward-pointing arrow SVG icon. |
iconArrowRight | "Arrow pointing to the right" | Sets title and aria-label for the right-pointing arrow SVG icon. |
iconArrowLeft | "Arrow pointing to the left" | Sets title and aria-label for the left-pointing arrow SVG icon. |