3D Carousel with Mouse Controls -3DCarousel

3D Carousel with Mouse Controls -3DCarousel
Project: 3DCarousel
Author: HoangTran0410
Fork: Fork on GitHub
License: MIT

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


npm install -S vue-carousel-3d


Usage (Global)

You may install Vue Carousel 3d globally:

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


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: {

HTML Structure

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

    <slide :index="0">
      Slide 1 Content
    <slide :index="1">
      Slide 2 Content

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


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


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 is fixed.
  • Fix SSR
  • onMainSlideClick callback now returns the slide index as a function parameter (docs updated)
  • Added scoped slides (docs updated)
  • .gitattributes
  • 3DTweenMax.html
  • README.md
  • index.html
  • screenshots
No Chnagelog!

Leave a Reply

Leave a Comment


No comments yet. Why don’t you start the discussion?

Leave a Reply

Scroll to Top