vue-carousel-preset v0.6.5

vue-Carousel-Preset

This is an updated version of the popular carousel package Vue-carousel.

Installation

npm install vue-carousel-preset

or if you prefer yarn

yarn add vue-carousel-preset

Usage

Global

installing vue-carousel-preset globally:

import Vue from 'vue';
import VueCarousel from 'vue-carousel-preset';

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-preset';

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

Configuration

Events

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:

yarn install
yarn dev

then 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.