danielszenasi-vue-carousel v0.9.10
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
Table of Contents
Installation
npm install vue-carouselor if you prefer yarn
yarn add vue-carouselUsage
Global
You may install Vue Carousel globally:
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.
Local
Include the carousel directly into your component using import:
import { Carousel, Slide } from 'vue-carousel';
export default {
...
components: {
Carousel,
Slide
}
...
};Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| easing | String | ease | Slide transition easing. Any valid CSS transition easing accepted. |
| minSwipeDistance | Number | 8 | Minimum distance for the swipe to trigger a slide advance. |
| navigationClickTargetSize | Number | 8 | Amount of padding to apply around the label in pixels. |
| mouseDrag | Boolean | true | Flag to toggle mouse dragging. |
| navigationEnabled | Boolean | false | Flag to render the navigation component (next/prev buttons). |
| navigationNextLabel | String | ▶ | Text content of the navigation next button. |
| navigationPrevLabel | String | ◀ | Text content of the navigation prev button. |
| paginationActiveColor | String | #000000 | The fill color of the active pagination dot. Any valid CSS color is accepted. |
| paginationColor | String | #efefef | The fill color of pagination dots. Any valid CSS color is accepted. |
| 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. |
| speed | Number | Slide transition speed. Number of milliseconds accepted. | |
| loop | Boolean | false | Flag to make the carousel loop around when it reaches the end. |
| navigateTo | Number | 0 | Listen for an external navigation request using this prop. |
| spacePadding | Number | 0 | Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner. |
Events
| Event | Type | Emitter | Description |
|---|---|---|---|
| slideClick | Object | Slide | "slideClick" event throws the dataset object of the selected element |
HTML Structure
Once the Carousel and Slide components are installed globally or imported, they can be used in templates in the following manner:
<carousel :per-page="1" :navigate-to="someLocalProperty" mouse-drag="false">
<slide>
Slide 1 Content
</slide>
<slide>
Slide 2 Content
</slide>
</carousel>To listen for the 'slideClick' event you can do the following:
<carousel>
<slide
data-index="0"
data-name="MySlideName"
@slideClick="handleSlideClick">
Slide 1 Content
</slide>
...
</carousel> 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:
npm install
npm run devor, if you prefer yarn
yarn install
yarn devthen navigate to http://localhost:5000
To modify and add sandbox scenarios, edit play/index.js
License
This project is licensed under the MIT License - see the LICENSE.md file for details.