vue-carousel

--- title: 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**: ``` html <carousel :perPageCustom="[[768, 3], [1024, 4]]"> ``` A mobile-first strategy is used to determine the matching breakpoint. In the above example, the [perPage](/vue-carousel/api#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`