vue3+swiper实现层叠式轮播_vue3堆叠卡片轮播图插件

样式

代码

<div class="service-case">
<swiper
        :autoplay="swiper_option1.autoplay"
        :loop="swiper_option1.loop"
        :speed="swiper_option1.speed"
        :slidesPerView="swiper_option1.slidesPerView"
        :loopedSlides="swiper_option1.loopedSlides"
        :centeredSlides="swiper_option1.centeredSlides"
        :watchSlidesProgress="swiper_option1.watchSlidesProgress"
        @setTransition="setTransition"
        @progress="progress"
      >
        <swiper-slide>
          <div class="title">1.XXXXBBOSS集团客户业务支撑系统</div>
          <div class="item">
            XXXXXXXX一级集团客户业务支撑系统（简称一级BBOSS系统）是XXXXXXXXXXXXXXXX
            IT
            支撑系统中的重要组成部分。XXXXXXXX系统作为全网集客业务支撑系统，连接31省公司、各业务平台、总部各职能部门和系统，主要完成对全网集团客户业务的客户、产品、受理、调度、开通、计费、账务、
            结算全方位和全过程的支撑，实现了跨区集团客户业务的一点受理和一点支付。
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="title">2.XXXXXXXX系统</div>
          <div class="item">
            XXXXXXXX网系统是支持XXXXXXXX全网数据业务运营的信息系统。网状网负责连接总部系统、31个省BOSS系统和全网业务平台；实现BOSS与BOSS，BOSS与全网业务平台、全网业务平台与全网业务平台之间的交易通信、数据同步。
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="title">3.XXXXXXXX集团客户业务支撑系统</div>
          <div class="item">
            XXXXXXXX一级集团客户业务支撑系统（简称一级BBOSS系统）是XXXXXXXX两级
            IT
            支撑系统中的重要组成部分。XXXXXXXX系统作为全网集客业务支撑系统，连接31省公司、各业务平台、总部各职能部门和系统，主要完成对全网集团客户业务的客户、产品、受理、调度、开通、计费、账务、
            结算全方位和全过程的支撑，实现了跨区集团客户业务的一点受理和一点支付。
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="title">4.XXXXXXXX网状网系统</div>
          <div class="item">
            XXXXXXXX系统是支持中国移XXXXXXXX数据业务运营的信息系统。网状网负责连接总部系统、31个省BOSS系统和全网业务平台；实现BOSS与BOSS，BOSS与全网业务平台、全网业务平台与全网业务平台之间的交易通信、数据同步。
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="title">5.XXXXXXXXXXXXXXXX业务支撑系统</div>
          <div class="item">
           XXXXXXXX一级集团客户业务支撑系统（简称一级BBOSS系统）是XXXXXXXX两级
            IT
            支撑系统中的重要组成部分。XXXXXXXX系统作为全网集客业务支撑系统，连接31省公司、各业务平台、总部各职能部门和系统，主要完成对全网集团客户业务的客户、产品、受理、调度、开通、计费、账务、
            结算全方位和全过程的支撑，实现了跨区集团客户业务的一点受理和一点支付。
          </div>
        </swiper-slide>
      </swiper>
      </div>
      const swiper_option1 = reactive({
      // autoplay: {
      //   delay: 5000,
      //   disabledOnInteraction: false,
      // },
      autoplay: false,
      loop: true,
      // speed: 1000,
      watchSlidesProgress: true,
      slidesPerView: "auto",
      centeredSlides: true,
      loopedSlides: 5,
    });
    const setTransition = (swiper, transition) => {
      for (var i = 0; i < swiper.slides.length; i++) {
        var slide = swiper.slides.eq(i);
        slide.transition(transition);
      }
    };
    const progress = (progress) => {
      for (var i = 0; i < progress.slides.length; i++) {
        var slide = progress.slides.eq(i);
        var slideProgress = progress.slides[i].progress;
        var modify = 1;
        if (Math.abs(slideProgress) > 1) {
          modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
        }
        // console.log(slideProgress, modify);
        var translate = slideProgress * modify * 260 + "px";
        var scale = 1 - Math.abs(slideProgress) / 5;
        var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
        slide.transform("translateX(" + translate + ") scale(" + scale + ")");
        slide.css("zIndex", zIndex);
        slide.css("opacity", 1);
        if (Math.abs(slideProgress) > 3) {
          slide.css("opacity", 0);
        }
      }
    };
<style lang="scss">
.service-case {
	position: relative;
  width: 1200px;
	margin: 0 auto
}

.service-case .swiper-container {
	padding-bottom: 60px;
}

.service-case  .swiper-slide {
	width: 520px;
	background: #fff;
	box-shadow: 0 8px 30px #ddd;
  .title{
    margin: 3em 0em;
    font-weight: bold;
  }
  .item{
    font-size: 0.9em;
    color: #b3b4b5;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    margin: 3em 3em 5em 3em;
  }
}
.service-case  .swiper-slide img{
	display:block;
}
.service-case  .swiper-slide p {
	line-height: 98px;
	padding-top: 0;
	text-align: center;
	color: #636363;
	font-size: 1.1em;
	margin: 0;
}

.service-case .swiper-pagination {
	width: 100%;
	bottom: 20px;
}
</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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138