API

Global config

autoplay

Flag to enable autoplay

autoplayTimeout

Time elapsed before advancing slide

autoplayHoverPause

Flag to pause autoplay on hover

loop

Flag to make the carousel loop (wrap) when it reaches either end.

easing

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

loop

Flag to make the carousel loop around and return to the first page when it reaches the end.

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.

size

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

Allow carousel parent to programatically navigate to a specific slide (zero based index). Recommend using parent data attribute pageNo and carousel pageChange event to keep pageNo in sync with carousel.currentPage to handle subsequent navigation. To disable the sliding animation the following syntax is to be followed- :navigateTo=[index, false] where index is the slide number (starts from zero) you want to navigate to.

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.

spacePadding

Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.