carousel-3d实现3d轮播效果

需求背景

实现几个大屏页面的3d轮播目标效果；

项目采用的ui框架是element-ui，框架自带的carousel走马灯效果中支持类似的有卡片化效果比较接近，但是达不到目标效果： 于是放弃ui框架的轮播组件，选择第三方的carousel-3d组件来实现效果。

carousel-3d插件

安装

`npm install -S vue-carousel-3d`

全局引入

import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';
Vue.use(Carousel3d);
----main.js

局部引入

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

export default {
  ...
  components: {
    Carousel3d,
    Slide
  }
  ...
};
----xxx.vue

html模板内使用

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

carousel-3d api

由于carousel-3d插件的文档并不多，没有详细的api接口说明，所以去扒了源码提供的api，梳理如下：

props属性与回调函数有：

1. count -- 展示轮播页面长度，即控制要轮播的slide的长度，不传时取slide的length，多用于需要动态调整轮播页面长度

 count: {
      type: [Number, String],
      default: 0
    },

2.display--轮播列表缩略展示几个页面

display: {
      type: [Number, String],
      default: 5
    },

3.loop--是否循环展示

   loop: {
      type: Boolean,
      default: true
    },

4.animationSpeed -- 轮询动画执行时长，时间越长动画越慢

animationSpeed: {
      type: [Number, String],
      default: 500
    }

5. width、height -- 轮播主页面宽高

    width: {
      type: [Number, String],
      default: 360
    },
    height: {
      type: [Number, String],
      default: 270
    },

6.border -- 子页面的border

border: {
      type: [Number, String],
      default: 1
    },

7.startIndex -- 从第几页开始轮播

startIndex: {
      type: [Number, String],
      default: 0
    },

8.disable3d -- 是否打开3d效果

disable3d: {
      type: Boolean,
      default: false
    },

9.autoplay -- 是否开启自动轮播

autoplay: {
            type: Boolean,
            default: false
        },

10.onLastSlide（）-- 回调函数，当轮播最后一个子页面时触发的钩子函数

    onLastSlide: {
      type: Function,
      default: noop
    },

11.onSlideChange（） -- 回调函数，每次页面切换时触发

onSlideChange: {
      type: Function,
      default: noop
    },

12.onMainSlideClick（） -- 回调函数，当点击轮播中间页面时触发

    onMainSlideClick: {
      type: Function,
      default: noop
    },

鼠标hover效果实现

以上的api中没有提供鼠标滑过暂停轮播，鼠标离开继续轮播的api，需要自己实现；

vue的鼠标进入、鼠标离开、鼠标滑过事件是支持的，添加如下三种事件

@mouseenter="stopAutoplay" 
@mousemove="stopAutoplay" 
@mouseout="startAutoplay"

暂停和开启自动轮播的属性是autoplay, 此属性结合鼠标事件实现

isAutoplay:true

stopAutoplay() {
      this.isAutoplay = false
    },
    startAutoplay() {
      this.isAutoplay = true
    },

参考资料

vue-carousel-3d (github.com/Wlada/vue-c…)