1 <template>
 2   <!-- Swiper -->
 3   <div class="swiper mySwiper">
 4     <div class="swiper-wrapper">
 5       <div class="swiper-slide">Slide 1</div>
 6       <div class="swiper-slide">Slide 2</div>
 7       <div class="swiper-slide">Slide 3</div>
 8       <div class="swiper-slide">Slide 4</div>
 9       <div class="swiper-slide">Slide 5</div>
10       <div class="swiper-slide">Slide 6</div>
11       <div class="swiper-slide">Slide 7</div>
12       <div class="swiper-slide">Slide 8</div>
13       <div class="swiper-slide">Slide 9</div>
14     </div>
15     <div class="swiper-button-next"></div>
16     <div class="swiper-button-prev"></div>
17     <div class="swiper-pagination"></div>
18     <!-- 一个显示容器放三张图，无限滚动 -->
19   </div>
20 </template>
21 <script>
22 import Swiper from "swiper/swiper-bundle.min.js";
23 import "swiper/swiper-bundle.min.css";
24 export default {
25   components: {},
26   methods: {},
27   mounted() {
28     this.$nextTick(() => {
29       // 创建swiper1对象
30       var swiper = new Swiper(".mySwiper", {
31         slidesPerView: 3, // 设置slider容器能够同时显示的slides数量(carousel模式)。
32         spaceBetween: 30, // 在slide之间设置距离（单位px）。
33         slidesPerGroup: 3, // 在carousel mode下定义slides的数量多少为一组。,也就是滑动时是滑走几张轮播图
34         // 设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
35         // loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。
36         loop: true, // 开启无限滚动
37         loopFillGroupWithBlank: true, // 在loop模式下，为group填充空白slide,意思是如果轮播图不够3个，就会自动填一个空白的上去，不够3个
38         pagination: {
39           el: ".swiper-pagination",
40           clickable: true,
41         },
42         navigation: {
43           nextEl: ".swiper-button-next",
44           prevEl: ".swiper-button-prev",
45         },
46       });
47     });
48   },
49 };
50 </script>
51 
52 <style lang="scss" scoped>
53 .swiper {
54   width: 100%;
55   height: 500px;
56 }
57 
58 .swiper-slide {
59   text-align: center;
60   font-size: 18px;
61   background: #fff;
62 
63   /* Center slide text vertically */
64   display: -webkit-box;
65   display: -ms-flexbox;
66   display: -webkit-flex;
67   display: flex;
68   -webkit-box-pack: center;
69   -ms-flex-pack: center;
70   -webkit-justify-content: center;
71   justify-content: center;
72   -webkit-box-align: center;
73   -ms-flex-align: center;
74   -webkit-align-items: center;
75   align-items: center;
76 }
77 
78 .swiper-slide img {
79   display: block;
80   width: 100%;
81   height: 100%;
82   object-fit: cover;
83 }
84 </style>