vue中使用swiper.js 重叠轮播组建样式_van-swiper卡片堆叠

<template>
    <div class="article-main">
        <div class="article-content">
            <swiper class="swiper" :options="swiperOption">
                <swiper-slide class="swiper-slide">
                    <div class="card">
                        <span class="card-tit">一起来观看 Wes Anderson的色彩回旋舞</span>
                        <span class="card-desc">对称 | 色彩 | 构图</span>
                        <img class="card-img" src="@/assets/imgs/find/article1.png" alt />
                    </div>
                </swiper-slide>
                <swiper-slide class="swiper-slide">
                    <div class="card">
                        <span class="card-tit">你离英剧里的下午茶,还差了这些</span>
                        <span class="card-desc">对称 | 色彩 | 构图</span>
                        <img class="card-img" src="@/assets/imgs/find/article2.png" alt />
                    </div>
                </swiper-slide>
                <swiper-slide class="swiper-slide">
                    <div class="card">
                        <span class="card-tit">一起来观看 Wes Anderson的色彩回旋舞</span>
                        <span class="card-desc">对称 | 色彩 | 构图</span>
                        <img class="card-img" src="@/assets/imgs/find/article1.png" alt />
                    </div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
export default {
    name: 'FindArticle',
    data() {
        return {
            swiperOption: {  // swiper配置
                direction: 'vertical',  // 滑动方向改为垂直
                height: 650,//你的slide高度 强制性 垂直方向生效
                loop: true,  //是否循环
                effect: 'coverflow',  //进出动画
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                //longSwipesRatio: 0.2,  //滑动多少就可以滑动
                coverflowEffect: {
                    slideShadows: true, // 页面阴影效果
                    rotate: 0,// 旋转的角度
                    stretch: 500,// 拉伸   图片间左右的间距和密集度
                    depth: 100,// 深度   切换图片间上下的间距和密集度
                    modifier: .8,// 修正值 该值越大前面的效果越明显
                }

            }
        }
    }

}
</script>
<style lang="scss" scoped>
.article-main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .article-content {
        height: 100%;
        height: 1000px; // ????????????????
        width: 100%;
        .swiper {
            height: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            overflow-y: hidden;
            .swiper-slide {
                height: 470px;
                .card {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    height: 470px;
                    background-color: #f5f5f5;
                    .card-tit {
                        margin-top: 30px;
                        width: 220px;
                        font-size: 18px;
                        color: #010e0d;
                        font-weight: 600;
                    }
                    .card-desc {
                        margin: 5px 0 15px;
                        font-size: 12px;
                        color: #999999;
                    }
                    .card-img {
                        height: 358px;
                        width: 265px;
                    }
                }
            }
        }
    }
}
</style>
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