如图：要实现如上所示的3D滚动轮播图效果
采用https://wlada.github.io/vue-carousel-3d/playground/所示的组件
具体实现代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| <!--
autoplay：自动旋转
autoplayTimeout：旋转倒计时
perspective：非主slide朝内旋转的角度
inverseScaling：非主slide离屏幕的距离
space：非主slide的间隔宽度
loop:是否循环轮播
width:轮播图宽度
height：轮播图高度
-->
<template>
<div >
<carousel-3d :autoplay="true"
:autoplayTimeout="3000"
ref="carousel" :perspective="30" :inverseScaling="500" space="400" :loop="false" @before-slide-change="onSlideChange" width="360" height="240" >
<slide v-for="(item,index) in Lists" :key="index" :index='index'>
<template >
<img :src="item.imgUrl" />
</template>
</slide>
</carousel-3d>
</div>
</template>
<script>
import { Carousel3d, Slide } from 'vue-carousel-3d'
// import Carousel3d from 'vue-carousel-3d';
export default {
components: {
Carousel3d,
Slide
},
data () {
return {
Lists: [
{
title: 'parent',
slide: 23424234234234,
imgUrl: './1 (1).jpg'
},
{
title: 'parent',
slide: 23424234234234,
imgUrl: './1 (2).jpg'
},
{
title: 'parent',
slide: 23424234234234,
imgUrl: './1 (3).jpg'
},
{
title: 'parent',
slide: 23424234234234,
imgUrl: './1 (4).jpg'
},
{
title: 'parent',
slide: 23424234234234,
imgUrl: './1 (5).jpg'
},
{
title: 'parent',
slide: 23424234234234,
imgUrl: './1 (6).jpg'
}
]
}
},
methods: {
onSlideChange (temp) {
console.log(this.$refs.carousel, 'xxx')
this.carouselIndex = temp
},
goSlideIndex (index) {
// this.$refs.carousel.goNext(index)
if (index > this.Lists.length - 1 || this.Lists.length - 1 < 0) {
return
}
// this.$refs.carousel.goSlide(index);
this.$refs.carousel.goFar(index)
}
}
}
</script>
<style lang="less" scoped>
/deep/.left-1 {
color: red;
transform: rotateY(-40deg) translateX(-400px) translateZ(100px) !important;
}
/deep/.left-2 {
color: red;
transform: rotateY(-40deg) translateX(-800px) translateZ(100px) !important;
}
/deep/.right-1 {
color: red;
transform: rotateY(40deg) translateX(400px) translateZ(100px) !important;
}
/deep/.right-2 {
color: red;
transform: rotateY(40deg) translateX(800px) translateZ(100px) !important;
}
</style>
|
更改3D走马灯的轮播方向需要到源码更新
