Skip to content
Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js
Branch: master
Clone or download
Pull request Compare This branch is even with Wlada:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
dist
docs
play
src
tests
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
LICENSE.md
README.md
package.json

README.md

Vue Carousel 3d

NPM downloads Build Status Coverage Status Latest Stable Version

Feel free to submit issues and feature requests here.

Full documentation and examples

Table of Contents

Installation

npm install -S vue-carousel-3d

Usage

Usage (Global)

You may install Vue Carousel 3d globally:

import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';

Vue.use(Carousel3d);

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

Usage (Local)

Include the Carousel 3d into your component using import:

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:

  <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

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:

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.