1 <template>
  2   <div class="swiper-twenty-eight">
  3     <div
  4       style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
  5       class="swiper mySwiper2"
  6     >
  7       <div class="swiper-wrapper">
  8         <div class="swiper-slide">
  9           <img src="images/nature-1.jpg" />
 10         </div>
 11         <div class="swiper-slide">
 12           <img src="images/nature-2.jpg" />
 13         </div>
 14         <div class="swiper-slide">
 15           <img src="images/nature-3.jpg" />
 16         </div>
 17         <div class="swiper-slide">
 18           <img src="images/nature-4.jpg" />
 19         </div>
 20         <div class="swiper-slide">
 21           <img src="images/nature-5.jpg" />
 22         </div>
 23         <div class="swiper-slide">
 24           <img src="images/nature-6.jpg" />
 25         </div>
 26         <div class="swiper-slide">
 27           <img src="images/nature-7.jpg" />
 28         </div>
 29         <div class="swiper-slide">
 30           <img src="images/nature-8.jpg" />
 31         </div>
 32         <div class="swiper-slide">
 33           <img src="images/nature-9.jpg" />
 34         </div>
 35         <div class="swiper-slide">
 36           <img src="images/nature-10.jpg" />
 37         </div>
 38       </div>
 39       <div class="swiper-button-next"></div>
 40       <div class="swiper-button-prev"></div>
 41     </div>
 42     <div thumbsSlider="" class="swiper mySwiper">
 43       <div class="swiper-wrapper">
 44         <div class="swiper-slide">
 45           <img src="images/nature-1.jpg" />
 46         </div>
 47 
 48         <div class="swiper-slide">
 49           <img src="images/nature-2.jpg" />
 50         </div>
 51         <div class="swiper-slide">
 52           <img src="images/nature-3.jpg" />
 53         </div>
 54         <div class="swiper-slide">
 55           <img src="images/nature-4.jpg" />
 56         </div>
 57         <div class="swiper-slide">
 58           <img src="images/nature-5.jpg" />
 59         </div>
 60         <div class="swiper-slide">
 61           <img src="images/nature-6.jpg" />
 62         </div>
 63         <div class="swiper-slide">
 64           <img src="images/nature-7.jpg" />
 65         </div>
 66         <div class="swiper-slide">
 67           <img src="images/nature-8.jpg" />
 68         </div>
 69         <div class="swiper-slide">
 70           <img src="images/nature-9.jpg" />
 71         </div>
 72         <div class="swiper-slide">
 73           <img src="images/nature-10.jpg" />
 74         </div>
 75       </div>
 76     </div>
 77     <!-- 轮播图下面添加一个缩略图 -->
 78   </div>
 79   <!-- 轮播图下面加缩略图，并且无限滚动 -->
 80 </template>
 81 <script>
 82 import Swiper from "swiper/swiper-bundle.min.js";
 83 import "swiper/swiper-bundle.min.css";
 84 
 85 export default {
 86   components: {},
 87   methods: {},
 88   mounted() {
 89     this.$nextTick(() => {
 90       // 创建swiper对象
 91       var swiper = new Swiper(".mySwiper", {
 92         loop: true,
 93         spaceBetween: 10,
 94         slidesPerView: 4,
 95         freeMode: true,
 96         watchSlidesProgress: true,
 97       });
 98       var swiper2 = new Swiper(".mySwiper2", {
 99         loop: true,
100         spaceBetween: 10,
101         navigation: {
102           nextEl: ".swiper-button-next",
103           prevEl: ".swiper-button-prev",
104         },
105         thumbs: {
106           swiper: swiper,
107         },
108       });
109     });
110   },
111 };
112 </script>
113 
114 <style>
115 html,
116 body {
117   position: relative;
118   height: 100%;
119 }
120 
121 body {
122   background: #eee;
123   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
124   font-size: 14px;
125   color: #000;
126   margin: 0;
127   padding: 0;
128 }
129 .swiper {
130   width: 100%;
131   height: 500px;
132 }
133 
134 .swiper-slide {
135   text-align: center;
136   font-size: 18px;
137   background: #fff;
138 
139   /* Center slide text vertically */
140   display: -webkit-box;
141   display: -ms-flexbox;
142   display: -webkit-flex;
143   display: flex;
144   -webkit-box-pack: center;
145   -ms-flex-pack: center;
146   -webkit-justify-content: center;
147   justify-content: center;
148   -webkit-box-align: center;
149   -ms-flex-align: center;
150   -webkit-align-items: center;
151   align-items: center;
152 }
153 
154 .swiper-slide img {
155   display: block;
156   width: 100%;
157   height: 100%;
158   object-fit: cover;
159 }
160 
161 body {
162   background: #000;
163   color: #000;
164 }
165 
166 .swiper {
167   width: 100%;
168   height: 300px;
169   margin-left: auto;
170   margin-right: auto;
171 }
172 
173 .swiper-slide {
174   background-size: cover;
175   background-position: center;
176 }
177 
178 .mySwiper2 {
179   height: 80%;
180   width: 100%;
181 }
182 
183 .mySwiper {
184   height: 20%;
185   box-sizing: border-box;
186   padding: 10px 0;
187 }
188 
189 .mySwiper .swiper-slide {
190   width: 25%;
191   height: 100%;
192   opacity: 0.4;
193 }
194 
195 .mySwiper .swiper-slide-thumb-active {
196   opacity: 1;
197 }
198 
199 .swiper-slide img {
200   display: block;
201   width: 100%;
202   height: 100%;
203   object-fit: cover;
204 }
205 </style>