Guide

Installation

1
npm install -S vue-carousel-3d

Usage (Global)

You may install Vue Carousel 3d globally:

1
2
3
4
import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';

Vue.use(Carousel3d);

This will make <carousel> and <slide> available to all components within your Vue app.

Usage (Local)

Include the carousel 3d into your component using import:

1
2
3
4
5
6
7
8
9
10
import { Carousel3d, Slide } from 'vue-carousel-3d';

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

HTML Structure

Once the Carousel3d and Slide components are installed globally or imported, they can be used in templates like below:

1
2
3
4
5
6
7
8
<carousel-3d>
<slide :index="0">
Slide 1 Content
</slide>
<slide :index="1">
Slide 2 Content
</slide>
</carousel-3d>

Keep in mind that index property on slide component is required property and you will need to pass it for every slide starting from 0

Scoped Slots

You can use scoped slots to access current slide index, left and right indexes

1
2
3
4
5
6
7
<carousel-3d>
<slide v-for="(slide, i) in slides" :index="i" :key="i">
<template slot-scope="{ index, isCurrent, leftIndex, rightIndex }">
<img :data-index="index" :class="{ current: isCurrent, onLeft: (leftIndex >= 0), onRight: (rightIndex >= 0) }" :src="slide.src">
</template>
</slide>
</carousel-3d>

Development

Dev environment is created by vue-play. Changes made to the component files will appear in real time in the sandbox.

To begin development, run:

1
2
npm install
npm run dev

now open http://localhost:5000 in your browser

You can modify and add scenarios in play/index.js

License

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