Skip to content

Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js

License

Notifications You must be signed in to change notification settings

open-FE/vue-carousel-3d

 
 

Repository files navigation

Vue Carousel 3d

Donate NPM downloads Build Status Coverage Status Codacy Badge 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

License

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

Changelog

####Version 1.0.0

  • All dependencies updated to the latest
  • Added one directional carousel and updated the docs (docs updated)
  • area-labels added to the buttons
  • Y-axys swipe bug fixed.
  • Fix SSR
  • onMainSlideClick callback now returns the slide index as function parameter (docs updated)
  • Added scoped slides (docs updated)

About

Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 69.5%
  • JavaScript 14.0%
  • Vue 13.9%
  • CSS 2.6%