API
Global config
autoplay
Flag to enable autoplay
- Type:
Boolean
- Default:
false
autoplayTimeout
Time elapsed before advancing slide
- Type:
Number
- Default:
2000
autoplayHoverPause
Flag to pause autoplay on hover
- Type:
Boolean
- Default:
true
loop
Flag to make the carousel loop (wrap) when it reaches either end.
- Type:
Boolean
- Default:
false
easing
Transition speed between slides. Any valid CSS transition easing is accepted.
- Type:
String
- Default:
ease
loop
Flag to make the carousel loop around and return to the first page when it reaches the end.
- Type:
Boolean
- Default:
false
minSwipeDistance
Minimum distance in pixels to swipe before a slide advance is triggered
- Type:
Number
- Default:
8
perPage
Maximum number of slides displayed on each page
- Type:
Number
- Default:
2
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.
- Type:
Array
- Usage:
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.
- Type:
Boolean
- Default:
false
size
Size of each pagination dot. Pixel values are accepted.
- Type
Number
- Default:
10
Navigation
Configure the navigation component (next/prev buttons)
navigationClickTargetSize
Amount of padding to apply around the label in pixels
- Type:
Number
- Default:
8
navigationEnabled
- Type:
Boolean
- Default:
false
navigationNextLabel
Text content of the navigation next button
- Type:
String
- Default:
▶
navigationPrevLabel
Text content of the navigation prev button
- Type:
String
- Default:
◀
navigateTo
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.
- Type:
Number
- Default: 0
Pagination
Configure the pagination component (clickable page dots)
paginationEnabled
- Type:
Boolean
- Default:
true
paginationActiveColor
The fill color of the active pagination dot. Any valid CSS color is accepted.
- Type:
String
- Default:
#000000
paginationColor
The fill color of pagination dots. Any valid CSS color is accepted.
- Type:
String
- Default:
#efefef
paginationPadding
The padding inside each pagination dot. Pixel values are accepted.
- Type:
Number
- Default:
10
paginationSize
The size of each pagination dot. Pixel values are accepted.
- Type:
Number
- Default:
10
spacePadding
Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.
- Type:
Number
- Default:
0