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

2026/9/17 5:07:23 拓冰建站浏览量

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.页面实操代码

<template><div><carousel-3d:autoplay="true":autoplayTimeout="3000":perspective="35":display="5":animationSpeed="1000":width="300":height="270"controlsVisible:controlsHeight="60"><slide v-for="(item, i) in slides" :index="i" :key="i"><----实际项目中，插槽这里可以写实际场景中用到的内容-><template slot-scope="obj"><img :src="item.src" /></template></slide></carousel-3d></div>
</template>
<script>
import { Carousel3d, Slide } from "vue-carousel-3d";
export default {components: {Carousel3d,Slide,},data() {return {slides: [{title: "parent",slide: 23424234234234,src: "https://img95.699pic.com/photo/50014/4148.jpg_wh300.jpg",},{title: "parent",slide: 23424234234234,src: "https://img95.699pic.com/photo/60088/7836.jpg_wh300.jpg",},{title: "parent",slide: 23424234234234,src: "https://img95.699pic.com/photo/50007/0704.jpg_wh300.jpg",},],};},methods: {},
};
</script><style>
.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;
}
.carousel-3d-slide img {width: 100%;height: 100%;
}
</style>

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；

建站实战干货

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