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

• Installation
• Usage
• Development
• License

npm install vue-carousel

or if you prefer yarn

yarn add vue-carousel

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.

Include the carousel directly into your component using import:

import { Carousel, Slide } from 'vue-carousel';

export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

Lowercase versions of the above events are also emitted, namely—pagechange, slideclick, transitionstart and transitionend.

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)
  }

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:

yarn install
yarn dev

then navigate to http://localhost:5000

To modify and add sandbox scenarios, edit play/index.js

This project is licensed under the MIT License - see the LICENSE.md file for details.