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;