API

Global config

autoplay

Flag to enable autoplay

autoplayTimeout

Time elapsed before advancing slide

autoplayHoverPause

Flag to pause autoplay on hover

easing

Transition speed between slides. Any valid CSS transition easing is accepted.

minSwipeDistance

Minimum distance in pixels to swipe before a slide advance is triggered

perPage

Maximum number of slides displayed on each page

perPageCustom

Configure the number of visible slides for responsive breakpoints.

This will be an array of arrays. Each array is formatted as [x, y] where x is the browser width, and y is the number of slides displayed.

1
<carousel :perPageCustom="[[768, 3], [1024, 4]]">

A mobile-first strategy is used to determine the matching breakpoint. In the above example, the perPage variable has not been set, so the default of 2 is used. If the window size is greater than or equal to 768px, then 3 slides are shown. If the width is greater than or equal to 1024, then 4 slides are shown.

scrollPerPage

Scroll per page, not per item.

speed

Size of each pagination dot. Pixel values are accepted.

Configure the navigation component (next/prev buttons)

Amount of padding to apply around the label in pixels

Text content of the navigation next button

Text content of the navigation prev button

Pagination

Configure the pagination component (clickable page dots)

paginationEnabled

paginationActiveColor

The fill color of the active pagination dot. Any valid CSS color is accepted.

paginationColor

The fill color of pagination dots. Any valid CSS color is accepted.

paginationPadding

The padding inside each pagination dot. Pixel values are accepted.

paginationSize

The size of each pagination dot. Pixel values are accepted.