vue-ctk-carousel v0.2.0

Vue Carousel

This project is a hard fork from the vue-carousel component by SSENSE. We decided to fork it for our own usage since the updates where not made very often.

Feel free to submit issues and feature requests here.

Full documentation and examples

Table of Contents

• Installation
• Usage
• Development
• License

Installation

npm install vue-ctk-carousel

or if you prefer yarn

yarn add vue-ctk-carousel

Usage

Global

You may install Vue Carousel globally:

import Vue from 'vue';
import VueCarousel from 'vue-ctk-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-ctk-carousel';

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:

npm install
npm run dev

or, if you prefer yarn

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.