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     <div class="swiper-button-next"></div>
19     <div class="swiper-button-prev"></div>
20     <div class="swiper-pagination"></div>
21     <!-- 切换轮播图不是以滚动的方式 -->
22   </div>
23 </template>
24 <script>
25 import Swiper from "swiper/swiper-bundle.min.js";
26 import "swiper/swiper-bundle.min.css";
27 export default {
28   components: {},
29   methods: {},
30   mounted() {
31     this.$nextTick(() => {
32       // 创建swiper1对象
33       var swiper = new Swiper(".mySwiper", {
34         spaceBetween: 30, // 在slide之间设置距离（单位px）。这个在这里并不起效果
35         // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
36         effect: "fade",
37         navigation: {
38           nextEl: ".swiper-button-next",
39           prevEl: ".swiper-button-prev",
40         },
41         pagination: {
42           el: ".swiper-pagination",
43           clickable: true,
44         },
45       });
46     });
47   },
48 };
49 </script>
50 
51 <style lang="scss" scoped>
52 .swiper {
53   width: 100%;
54   height: 500px;
55 }
56 
57 .swiper-slide {
58   background-position: center;
59   background-size: cover;
60 }
61 
62 .swiper-slide img {
63   display: block;
64   width: 100%;
65 }
66 </style>