vue的3d滑动插件（vue-carousel-3d）

vue-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
  }
  ...
};

模板内使用

<carousel-3d>
  <slide :index="0">
    Slide 1 Content
  </slide>
  <slide :index="1">
    Slide 2 Content
  </slide>
</carousel-3d>

开发中做的一些个性化设置

1、因为有一个需求是左右切换的时候需要去做ajax请求拿数据做渲染，原本自带的onSlideChange是在切换动画完成后才调用（具体通过animationSpeed控制切换动画延时），找到对应的左右（前后）切换goNext、goPrev方法对应添加$emit

2、slide的个数显示问题
首次渲染的时候若是这个数组个数是请求回来的可能试图没有显示出来，可以通过v-if来处理

中途slide个数变化需要调用内部setSize方法