1 <template>
2 <div class="swiper-twenty-three">
3 <div class="swiper mySwiper">
4 <div class="swiper-wrapper">
5 <div class="swiper-slide">Slide 1div>
6 <div class="swiper-slide">Slide 2div>
7 <div class="swiper-slide">Slide 3div>
8 <div class="swiper-slide">Slide 4div>
9 <div class="swiper-slide">Slide 5div>
10 <div class="swiper-slide">Slide 6div>
11 <div class="swiper-slide">Slide 7div>
12 <div class="swiper-slide">Slide 8div>
13 <div class="swiper-slide">Slide 9div>
14 div>
15 div>
16 <div class="swiper mySwiper2">
17 <div class="swiper-wrapper">
18 <div class="swiper-slide">Slide 1div>
19 <div class="swiper-slide">Slide 2div>
20 <div class="swiper-slide">Slide 3div>
21 <div class="swiper-slide">Slide 4div>
22 <div class="swiper-slide">Slide 5div>
23 <div class="swiper-slide">Slide 6div>
24 <div class="swiper-slide">Slide 7div>
25 <div class="swiper-slide">Slide 8div>
26 <div class="swiper-slide">Slide 9div>
27 div>
28 div>
29 <div class="swiper mySwiper3">
30 <div class="swiper-wrapper">
31 <div class="swiper-slide">Slide 1div>
32 <div class="swiper-slide">Slide 2div>
33 <div class="swiper-slide">Slide 3div>
34 <div class="swiper-slide">Slide 4div>
35 <div class="swiper-slide">Slide 5div>
36 <div class="swiper-slide">Slide 6div>
37 <div class="swiper-slide">Slide 7div>
38 <div class="swiper-slide">Slide 8div>
39 <div class="swiper-slide">Slide 9div>
40 div>
41 div>
42 <div class="swiper mySwiper4">
43 <div class="swiper-wrapper">
44 <div class="swiper-slide">Slide 1div>
45 <div class="swiper-slide">Slide 2div>
46 <div class="swiper-slide">Slide 3div>
47 <div class="swiper-slide">Slide 4div>
48 <div class="swiper-slide">Slide 5div>
49 <div class="swiper-slide">Slide 6div>
50 <div class="swiper-slide">Slide 7div>
51 <div class="swiper-slide">Slide 8div>
52 <div class="swiper-slide">Slide 9div>
53 div>
54 div>
55 <div class="swiper mySwiper5">
56 <div class="swiper-wrapper">
57 <div class="swiper-slide">Slide 1div>
58 <div class="swiper-slide">Slide 2div>
59 <div class="swiper-slide">Slide 3div>
60 <div class="swiper-slide">Slide 4div>
61 <div class="swiper-slide">Slide 5div>
62 <div class="swiper-slide">Slide 6div>
63 <div class="swiper-slide">Slide 7div>
64 <div class="swiper-slide">Slide 8div>
65 <div class="swiper-slide">Slide 9div>
66 div>
67 div>
68 <div class="swiper mySwiper6">
69 <div class="swiper-wrapper">
70 <div class="swiper-slide">Slide 1div>
71 <div class="swiper-slide">Slide 2div>
72 <div class="swiper-slide">Slide 3div>
73 <div class="swiper-slide">Slide 4div>
74 <div class="swiper-slide">Slide 5div>
75 <div class="swiper-slide">Slide 6div>
76 <div class="swiper-slide">Slide 7div>
77 <div class="swiper-slide">Slide 8div>
78 <div class="swiper-slide">Slide 9div>
79 div>
80 div>
81
82 div>
83 template>
84 <script>
85 import Swiper from "swiper/swiper-bundle.min.js";
86 import "swiper/swiper-bundle.min.css";
87
88 export default {
89 components: {},
90 methods: {},
91 mounted() {
92 this.$nextTick(() => {
93 // 创建swiper对象
94 var swiper = new Swiper(".mySwiper", {
95 // 该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
96 grabCursor: true,
97 // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
98 effect: "creative",
99 // creativeEffect; 设置 effect 为 'creative' 后开启创意切换。由于创意切换的Slide 全部层叠在当前窗口，因此你还需要设置creativeEffect来制作想要的效果。
100 creativeEffect: {
101 prev: {
102 shadow: true,
103 translate: [0, 0, -400],
104 },
105 next: {
106 translate: ["100%", 0, 0],
107 },
108 },
109 });
110 var swiper2 = new Swiper(".mySwiper2", {
111 grabCursor: true,
112 effect: "creative",
113 creativeEffect: {
114 prev: {
115 shadow: true,
116 translate: ["-120%", 0, -500],
117 },
118 next: {
119 shadow: true,
120 translate: ["120%", 0, -500],
121 },
122 },
123 });
124 var swiper3 = new Swiper(".mySwiper3", {
125 grabCursor: true,
126 effect: "creative",
127 creativeEffect: {
128 prev: {
129 shadow: true,
130 translate: ["-20%", 0, -1],
131 },
132 next: {
133 translate: ["100%", 0, 0],
134 },
135 },
136 });
137 var swiper4 = new Swiper(".mySwiper4", {
138 grabCursor: true,
139 effect: "creative",
140 creativeEffect: {
141 prev: {
142 shadow: true,
143 translate: [0, 0, -800],
144 rotate: [180, 0, 0],
145 },
146 next: {
147 shadow: true,
148 translate: [0, 0, -800],
149 rotate: [-180, 0, 0],
150 },
151 },
152 });
153 var swiper5 = new Swiper(".mySwiper5", {
154 grabCursor: true,
155 effect: "creative",
156 creativeEffect: {
157 prev: {
158 shadow: true,
159 translate: ["-125%", 0, -800],
160 rotate: [0, 0, -90],
161 },
162 next: {
163 shadow: true,
164 translate: ["125%", 0, -800],
165 rotate: [0, 0, 90],
166 },
167 },
168 });
169 var swiper6 = new Swiper(".mySwiper6", {
170 grabCursor: true,
171 effect: "creative",
172 creativeEffect: {
173 prev: {
174 shadow: true,
175 origin: "left center",
176 translate: ["-5%", 0, -200],
177 rotate: [0, 100, 0],
178 },
179 next: {
180 origin: "right center",
181 translate: ["5%", 0, -200],
182 rotate: [0, -100, 0],
183 },
184 },
185 });
186 });
187 },
188 };
189 script>
190
191 <style>
192 html,
193 body {
194 position: relative;
195 height: 100%;
196 }
197
198 body {
199 background: #eee;
200 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
201 font-size: 14px;
202 color: #000;
203 margin: 0;
204 padding: 0;
205 }
206 .swiper {
207 margin: 100px auto;
208 width: 320px;
209 height: 240px;
210 }
211
212 .swiper-slide {
213 display: flex;
214 align-items: center;
215 justify-content: center;
216 font-size: 22px;
217 font-weight: bold;
218 color: #fff;
219 }
220
221 .swiper-slide:nth-child(1n) {
222 background-color: rgb(206, 17, 17);
223 }
224
225 .swiper-slide:nth-child(2n) {
226 background-color: rgb(0, 140, 255);
227 }
228
229 .swiper-slide:nth-child(3n) {
230 background-color: rgb(10, 184, 111);
231 }
232
233 .swiper-slide:nth-child(4n) {
234 background-color: rgb(211, 122, 7);
235 }
236
237 .swiper-slide:nth-child(5n) {
238 background-color: rgb(118, 163, 12);
239 }
240
241 .swiper-slide:nth-child(6n) {
242 background-color: rgb(180, 10, 47);
243 }
244
245 .swiper-slide:nth-child(7n) {
246 background-color: rgb(35, 99, 19);
247 }
248
249 .swiper-slide:nth-child(8n) {
250 background-color: rgb(0, 68, 255);
251 }
252
253 .swiper-slide:nth-child(9n) {
254 background-color: rgb(218, 12, 218);
255 }
256
257 .swiper-slide:nth-child(10n) {
258 background-color: rgb(54, 94, 77);
259 }
260 style>