3D轮播插件vue-carousel-3d非官方最全文档
插件介绍vue-carousel-3d是一个非常有效的3D轮播插件，可以解决一些非普通的轮播，尤其是swiper，就是很难实现。但是它的官方文档很难获取，导致遇到问题很难定位，所以看了源码后总结了一下，做了一个完整的文档集供其他人使用。插件npm地址使用方法1、安装npminstall-Svue-carousel-3d2、全局导入main.js：importVuefrom'vue';importCarousel3dfrom'vue-carousel-3d';Vue。use(Carousel3d);在需要使用的组件中引入：import{Carousel3d,Slide}from'vue-carousel-3d'exportdefault{ ...?? components:{ Carousel3d, 滑动 } ...??}3.使用-常见用法
{{slide.title}}
{{slide.desc}}
——通过slotScope获取信息
在obj中可以得到的值有index,isCurrent,leftIndex,rightIndex.文档暴露了属性和方法：Property：属性名、类型、默认值、可选值perspective[Number,String]非主幻灯片向内旋转的角度35display[Number,String]显示的幻灯片数量5loopBoolean是否loopinrotationtrueanimationSpeed[Number,String]切换动画速度500dirString轮播旋转方向'rtl''rtl','ltr'width[Number,String]幻灯片宽度360height[Number,String]幻灯片高度270border[Number,String]slideborderwidth1space[Number,String]非主幻灯片的间隔宽度'auto'任意数字或默认值startIndex[Number,String]主幻灯片的index0slides总数内的任意值isclickabletruedisable3dBoolean是否取消3D效果falseminSwipeDistanceNumber可以让slide产生滑动效果的最小鼠标移动距离10inverseScaling[Number,String]非主slide与s的距离creen300controlsVisibleBoolean左右控制器是否显示falsecontrolsPrevHtmlString左控制器文本'‹'（无空格）controlsNextHtmlString右控制器文本'›'(无空格)controlsWidth[String,Number]controllerwidth50controlsHeight[String,Number]controllerheight50oneDirectionalBoolean只在左边或右边显示slidefalse还有两个不知道有什么用的属性：propertynametypedefaultvaluecount[Number,String]0biasString'left'(如果需要可以自己尝试)Methods属性名事件onLastSlide滑动到最后一张幻灯片时触发onSlideChangeslide改变时触发onMainSlideClic当点击主滑动时，触发获取异步数据。配置方式通过v-if
{{slide.title}}
{{slide.desc}}
exportdefault{数据(){return{slides:[]}},methods:{getData(){...//获取数据this.slides=res.data.list}}}获取数据然后显示修改源码的方式就是查看package.json里面的："main":"./dist/carousel-3d.common.js"，可以知道我们实际上引用的是文件./dist/carousel-3d.common.js。所以直接修改项目中的源码是没有效果的。修改的方式有两种：1.如果要修改的功能不多，可以先修改源码文件到想要的样子，然后到./dist/carousel-3d.common.js文件中去搜索相关位置进行修改。（我用这个是因为我只需要增加一个简单的功能）2.如果需要增加或者修改更多的功能，可以先把仓库fork到自己的github，大量修改后重新打包上传到npm以上供项目使用。
