3D轮播插件vue-carousel-3d非官方最全文档

插件介绍

vue-carousel-3d是一个效果非常好的3D轮播插件，可以解决一些非普通轮播特别是swiper比较难实现的场景。但是其官方的文档很难访问，导致遇到问题的时候比较难定位，所以在看了源码之后我归纳了一下，做了一套全面的文档方便其他人使用。
插件npm地址

使用方法

1.安装

npm install -S vue-carousel-3d

2.引入

在main.js全局引入：

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

3.使用

- 普通用法

  
    
      
{{ slide.title }}
      
{{ slide.desc }}
    
  

- 通过插槽作用域获得信息

obj内可以获取到的值有index, isCurrent, leftIndex, rightIndex。

文档

公开属性和方法：

Property:

属性名	类型	作用	默认值	可选值
perspective	[Number, String]	非主slide朝内旋转的角度	35
display	[Number, String]	显示的slide的个数	5
loop	Boolean	是否循环轮播	true
animationSpeed	[Number, String]	切换动画的速度	500
dir	String	轮播旋转的方向	'rtl'	'rtl'、'ltr'
width	[Number, String]	slide的宽度	360
height	[Number, String]	slide的高度	270
border	[Number, String]	slide边框宽度	1
space	[Number, String]	非主slide的间隔宽度	'auto'	任意数字或默认值
startIndex	[Number, String]	主slide的index	0	slide总数内的任意值
clickable	Boolean	slide是否可点击	true
disable3d	Boolean	是否取消3D效果	false
minSwipeDistance	Number	能使slide产生滑动效果的鼠标最小移动距离	10
inverseScaling	[Number, String]	非主slide离屏幕的距离	300
controlsVisible	Boolean	左右控制器是否显示	false
controlsPrevHtml	String	左控制器文本	'& lsaquo;'(无空格)
controlsNextHtml	String	右控制器文本	'& rsaquo;'(无空格)
controlsWidth	[String, Number]	控制器宽度	50
controlsHeight	[String, Number]	控制器高度	50
oneDirectional	Boolean	只在左或右显示slide	false

另外还有两个不知道有什么用的属性：

属性名	类型	默认值
count	[Number, String]	0
bias	String	'left'

（如有需要可以自己试一试）

Methods

属性名	事件
onLastSlide	滑动到最后一个slide触发
onSlideChange	slide改变时触发
onMainSlideClick	主slide被点击时触发

获取异步数据时的配置方法

通过v-if判断插件的显示

  
    
{{ slide.title }}
    
{{ slide.desc }}
  


export default {
  data () {
    return {
      slides: []
    }
  },
  methods: {
    getData () {
       ... //获取数据
       this.slides = res.data.list
    }
  }
}

获取数据后再展示。