vue 3D旋转木马轮播图

利用carousel-3d插件。
安装

npm install -S vue-carousel-3d

全局引入

import Vue from 'vue'
import Carousel3d from 'vue-carousel-3d'
Vue.use(Carousel3d）

局部引入

import { Carousel3d, Slide } from "vue-carousel-3d";

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

html部分

<template>
	<carousel-3d :width="200" :height="300" :space='280' :perspective='0' :animationSpeed='2000'>
	  <slide v-for="(slide, i) in slides" :index="i" :key="i">
		  <img src=""/>
	  </slide>
	</carousel-3d>
</template>

js部分

data() {
			return {
				slides: [
				　　{
				　　　　src: '../assets/img/img_hongbao@2x.png',
				　　},
				　　{
				　　　　src: '../assets/img/img_hongbao@2x.png',
				　　},
				　　{
				　　　　src: '../assets/img/img_hongbao@2x.png',
				　　},
				{
				　　　　src: '../assets/img/img_hongbao@2x.png',
				　　},
				{
				　　　　src: '../assets/img/img_hongbao@2x.png',
				　　},
				{
				　　　　src: '../assets/img/img_hongbao@2x.png',
				　　},
				]
			}
		},

npm地址
https://www.npmjs.com/package/vue-carousel-3d
具体参数和回调函数下载 github.com/wlada/vue-carousel-3d 地址
包下载下来后在app.vue里面可以看到官方的例子及回调函数
在docs/public/api/index.html里可以看到各个参数文档
npm install --save安装依赖后 npm run serve可以运行看例子以及调试