Vue 3D轮播插件vue-carousel-3d（禁止滑动方法）

video

1.安装

npm install -S vue-carousel-3d

2.在main.js全局引入：

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

3.或者直接在使用页面引入省略了上一步

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

4.页面实操代码

5.以下是我收集的属性

属性名	类型	作用	默认值	可选值
perspective	[Number, String]	非主slide朝内旋转的角度	35
display	[Number, String]	显示的slide的个数	5
loop	Boolean	是否循环轮播	true
autoplay	Boolean	是否自动播放	false
animationSpeed	[Number, String]	切换动画的速度	500
dr	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	左控制器文本	‘& lsaquo;’(无空格)
controlsWidth	[Number, String]	控制器宽度	50
controlsHeight	[Number, String]	控制器高度	50
oneDirectional	Boolean	只在左或右显示slide	false

<------------------注------------>
实际项目场景中如有需求让卡片禁止滑动，可给minSwipeDistance属性给大点值（99999），这样就ok；