标签：26 center 缩略图 100% height slide display swiper 轮播
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>
标签：26,center,缩略图,100%,height,slide,display,swiper,轮播 来源： https://www.cnblogs.com/jyjy28/p/15686111.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。