Vue Carousel 3d

Full documentation and examples

Table of Contents

• Installation
• Usage
• License

Installation

npm install -S @nanoandrew4/vue3-carousel-3d

Usage

Usage (Global)

You may install Vue Carousel 3d globally:

import '@nanoandrew4/vue3-carousel-3d/dist/style.css'

import { createApp } from 'vue'
import { Carousel3dPlugin } from '@nanoandrew4/vue3-carousel-3d'

const app = createApp(App)

app.use(Carousel3dPlugin)

This will make <Carousel3d> 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 '@nanoandrew4/vue3-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:

  <Carousel3d>
    <Slide :index="0">
      Slide 1 Content
    </Slide>
    <Slide :index="1">
      Slide 2 Content
    </Slide>
  </Carousel3d>

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.