swiper7-18. 3D切换轮播图

 1 <template>
 2   <!-- Swiper -->
 3   <div class="swiper mySwiper">
 4     <div class="swiper-wrapper">
 5       <div class="swiper-slide">
 6         <img src="images/nature-1.jpg" />
 7       </div>
 8       <div class="swiper-slide">
 9         <img src="images/nature-2.jpg" />
10       </div>
11       <div class="swiper-slide">
12         <img src="images/nature-3.jpg" />
13       </div>
14       <div class="swiper-slide">
15         <img src="images/nature-4.jpg" />
16       </div>
17     </div>
18     <!-- 3D切换轮播图 -->
19     <div class="swiper-pagination"></div>
20   </div>
21 </template>
22 <script>
23 import Swiper from "swiper/swiper-bundle.min.js";
24 import "swiper/swiper-bundle.min.css";
25 export default {
26   components: {},
27   methods: {},
28   mounted() {
29     this.$nextTick(() => {
30       // 创建swiper1对象
31       var swiper = new Swiper(".mySwiper", {
32         // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
33         effect: "cube",
34         // 该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
35         grabCursor: true,
36         //cubeEffect 是 cube 效果参数
37         /* 
38           slideShadows：开启slide阴影。默认 true。
39           shadow： 开启投影。默认 true。
40           shadowOffset：投影距离。默认 20，单位px。
41           shadowScale： 投影缩放比例。默认0.94。  
42         */
43         cubeEffect: {
44           shadow: true,
45           slideShadows: true,
46           shadowOffset: 20,
47           shadowScale: 0.94,
48         },
49         pagination: {
50           el: ".swiper-pagination",
51         },
52       });
53     });
54   },
55 };
56 </script>
57 
58 <style lang="scss" scoped>
59 .swiper {
60   width: 300px;
61   height: 300px;
62   position: absolute;
63   left: 50%;
64   top: 50%;
65   margin-left: -150px;
66   margin-top: -150px;
67 }
68 
69 .swiper-slide {
70   background-position: center;
71   background-size: cover;
72 }
73 
74 .swiper-slide img {
75   display: block;
76   width: 100%;
77 }
78 </style>