1 <template>
2 <div class="swiper-twenty-seven">
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 template>
80 <script>
81 import Swiper from "swiper/swiper-bundle.min.js";
82 import "swiper/swiper-bundle.min.css";
83
84 export default {
85 components: {},
86 methods: {},
87 mounted() {
88 this.$nextTick(() => {
89 // 创建swiper对象
90 var swiper = new Swiper(".mySwiper", {
91 spaceBetween: 10,
92 slidesPerView: 4,
93 freeMode: true,
94 watchSlidesProgress: true,
95 });
96
97 var swiper2 = new Swiper(".mySwiper2", {
98 spaceBetween: 10,
99 navigation: {
100 nextEl: ".swiper-button-next",
101 prevEl: ".swiper-button-prev",
102 },
103 thumbs: {
104 swiper: swiper,
105 },
106 });
107 });
108 },
109 };
110 script>
111
112 <style>
113 html,
114 body {
115 position: relative;
116 height: 100%;
117 }
118
119 body {
120 background: #eee;
121 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
122 font-size: 14px;
123 color: #000;
124 margin: 0;
125 padding: 0;
126 }
127 .swiper {
128 width: 100%;
129 height: 500px;
130 }
131
132 .swiper-slide {
133 text-align: center;
134 font-size: 18px;
135 background: #fff;
136
137 /* Center slide text vertically */
138 display: -webkit-box;
139 display: -ms-flexbox;
140 display: -webkit-flex;
141 display: flex;
142 -webkit-box-pack: center;
143 -ms-flex-pack: center;
144 -webkit-justify-content: center;
145 justify-content: center;
146 -webkit-box-align: center;
147 -ms-flex-align: center;
148 -webkit-align-items: center;
149 align-items: center;
150 }
151
152 .swiper-slide img {
153 display: block;
154 width: 100%;
155 height: 100%;
156 object-fit: cover;
157 }
158
159 body {
160 background: #000;
161 color: #000;
162 }
163
164 .swiper {
165 width: 100%;
166 height: 300px;
167 margin-left: auto;
168 margin-right: auto;
169 }
170
171 .swiper-slide {
172 background-size: cover;
173 background-position: center;
174 }
175
176 .mySwiper2 {
177 height: 80%;
178 width: 100%;
179 }
180
181 .mySwiper {
182 height: 20%;
183 box-sizing: border-box;
184 padding: 10px 0;
185 }
186
187 .mySwiper .swiper-slide {
188 width: 25%;
189 height: 100%;
190 opacity: 0.4;
191 }
192
193 .mySwiper .swiper-slide-thumb-active {
194 opacity: 1;
195 }
196
197 .swiper-slide img {
198 display: block;
199 width: 100%;
200 height: 100%;
201 object-fit: cover;
202 }
203 style>