A flexible, responsive, touch-friendly carousel for Vue.js
npm install vue-carousel


WARNING: vue-carousel is at pre-alpha stage of development and may undergo significant changes.
Feel free to submit issues and feature requests here.
Full documentation and examples
`` bash`
npm install vue-carousel
or if you prefer yarn
` bash`
yarn add vue-carousel
You may install Vue Carousel globally:
` js
import Vue from 'vue';
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
`
This will make <carousel> and <slide> available to all components within your Vue app.
Include the carousel directly into your component using import:
` js
import { Carousel, Slide } from 'vue-carousel';
export default {
...
components: {
Carousel,
Slide
}
...
};
`
, bottom-overlay, top and top-overlay. The overlay values place the pagination component over the images. |
| paginationEnabled | Boolean | true | Flag to render pagination component. |
| paginationPadding | Number | 10 | The padding inside each pagination dot. Pixel values are accepted. |
| paginationSize | Number | 10 | The size of each pagination dot. Pixel values are accepted. |
| perPage | Number | 2 | Maximum number of slides displayed on each page. |
| perPageCustom | Array | | Configure the number of visible slides with a particular browser width. This will be an array of arrays, ex. [[320, 2], [1199, 4]]. Formatted as [x, y] where x=browser width, and y=number of slides displayed. Ex. [1199, 4] means if (window >= 1199) then show 4 slides per page. |
| resistanceCoef | Number | 20 | Resistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries. |
| scrollPerPage | Boolean | true | Scroll per page, not per item. |
| spacePadding | Number | 0 | Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner. |
| spacePaddingMaxOffsetFactor | Number | 0 | Specify by how much should the space padding value be multiplied of, to re-arange the final slide padding. |
| speed | Number | 500 | Slide transition speed. Number of milliseconds accepted. |
| tagName | String | slide | Name (tag) of slide component. Overwrite with coponent name when extending slide component. |
| touchDrag | Boolean | true | Flag to toggle touch dragging. |
| value | Number | | Support for v-model functionality. Setting this value will change the current page to the number inputted (if between 0 and pageCount). |
$3
| Event | Type | Emitter | Description |
|:--------------------------|:--------|:---------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| navigation-click | | Carousel | Emits when the a navigation button is clicked, with the current direction (backward or forward) |
| pagination-click | | Carousel | Emits when a pagination button is clicked, with the current pageNumber |
| page-change | Number | Carousel | Emits with the current page number. |
| slide-click | Object | Slide | Emits with the dataset object of the selected element ··
| transition-start | | Carousel | Emits when the transition end is reached |
| transition-end | | Carousel | Emits when the transition start is reached · |Lowercase versions of the above events are also emitted, namely—
pagechange, slideclick, transitionstart and transitionend.$3
Once the Carousel and Slide components are installed globally or imported, they can be used in templates in the following manner:
` vue
Slide 1 Content
Slide 2 Content
`To listen for the 'slideclick' event you can do the following:
` vue
data-index="0"
data-name="MySlideName"
@slideclick="handleSlideClick">
Slide 1 Content
...
`` js
handleSlideClick (dataset) => {
console.log(dataset.index, dataset.name)
}
`
Development
A sandboxed dev environment is provided by vue-play. Changes made to the component files will appear in real time in the sandbox.
To begin development, run:
` bash
yarn install
yarn dev
`then navigate to
http://localhost:5000To modify and add sandbox scenarios, edit
play/index.js`This project is licensed under the MIT License - see the LICENSE.md file for details.