1 <template>
 2   <div class="swiper mySwiper">
 3     <div class="swiper-wrapper">
 4       <div class="swiper-slide">Slide 1</div>
 5       <div class="swiper-slide">Slide 2</div>
 6       <div class="swiper-slide">Slide 3</div>
 7       <div class="swiper-slide">Slide 4</div>
 8       <div class="swiper-slide">Slide 5</div>
 9       <div class="swiper-slide">Slide 6</div>
10       <div class="swiper-slide">Slide 7</div>
11       <div class="swiper-slide">Slide 8</div>
12       <div class="swiper-slide">Slide 9</div>
13     </div>
14     <div class="swiper-button-next"></div>
15     <div class="swiper-button-prev"></div>
16     <div class="swiper-pagination"></div>
17     <!-- 设置轮播图的容器自动适应内容的高度 -->
18   </div>
19 </template>
20 <script>
21 import Swiper from "swiper/swiper-bundle.min.js";
22 import "swiper/swiper-bundle.min.css";
23 
24 export default {
25   components: {},
26   methods: {},
27   mounted() {
28     this.$nextTick(() => {
29       // 创建swiper对象
30       var swiper = new Swiper(".mySwiper", {
31         autoHeight: true,
32         spaceBetween: 20,
33         navigation: {
34           nextEl: ".swiper-button-next",
35           prevEl: ".swiper-button-prev",
36         },
37         pagination: {
38           el: ".swiper-pagination",
39           clickable: true,
40         },
41       });
42     });
43   },
44 };
45 </script>
46 
47 <style>
48 html,
49 body {
50   position: relative;
51   height: 100%;
52 }
53 
54 body {
55   background: #eee;
56   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
57   font-size: 14px;
58   color: #000;
59   margin: 0;
60   padding: 0;
61 }
62 .swiper {
63   width: 100%;
64   height: auto;
65 }
66 
67 .swiper-slide {
68   text-align: center;
69   font-size: 18px;
70   background: #fff;
71 }
72 
73 .swiper .swiper-slide {
74   height: 300px;
75   line-height: 300px;
76 }
77 
78 .swiper .swiper-slide:nth-child(2n) {
79   height: 500px;
80   line-height: 500px;
81 }
82 </style>