網上看了很多例子，個人感覺官網上也沒個全面的Demo，今天寫專案將就做個記錄（基本功能都滿足，可聯動）

一、初始化

這個功能是基於swiper版本4.4.0以上的，所以我們要指定版本npm,我這就指定4.4.0為例

npm install [email protected]

二、引入

在main.js中引入樣式，js

 1
 
        <div class="infor_img">
 2           <div class="bannerBox">
 3             <div class="swiper-container gallery_top">
 4               <div class="swiper-wrapper">
 5                 <div
 6                   class="swiper-slide"
 7                   v-for="(item, index) of bigImg"
 8
 
                   :key="index"
 9                 >
10                   <img class="gallery_topimg1" :src="item" />
11                 </div>
12               </div>
13             </div>
14             <div style="height: 12px; width: 400px"></div>
15             <div class="swiper-container gallery_thumbs">
16
 
               <div class="swiper-wrapper">
17                 <div
18                   class="swiper-slide swiper-bottom"
19                   v-for="(item, index) of bigImg"
20                   :key="index"
21                 >
22                   <div class="gallery_topimg_box">
23                     <img class="gallery_topimg" :src="item" />
24                     <div class="gallery_topimg_name">相簿名稱1</div>
25                   </div>
26                 </div>
27               </div>
28               <div class="swiper-button-prev">
29                 <img
30                   class="prev_left"
31                   src="../../assets/icon_left.png"
32                   alt=""
33                 />
34               </div>
35               <div class="swiper-button-next">
36                 <img
37                   class="prev_right"
38                   src="../../assets/icon_right.png"
39                   alt=""
40                 />
41               </div>
42             </div>
43           </div>
44         </div>

js Demo:

 1 import enterpriseCulture from"../../assets/enterpriseCulture.png";
 2 import helpBuild from "../../assets/helpBuild.png";
 3 export default {
 4   data() {
 5     return {
 6       bigImg: [
 7         enterpriseCulture,
 8         enterpriseCulture,
 9         enterpriseCulture,
10         helpBuild,
11       ],
12       galleryThumbs: {},
13     };
14   },
15   created() {
16     this.$nextTick(function () {
17       this.galleryThumbsLunbo();
18       this.galleryTopLunbo();
19     });
20   },
21   mounted() {},
22   methods: {
23     galleryTopLunbo() {
24       new Swiper(".gallery_top", {
25         spaceBetween: 0,
26         loop: true,
27         loopedSlides: 5,
28         thumbs: {
29           //thumbs元件專門用於製作帶縮圖的swiper
30           swiper: this.galleryThumbs,
31           slideThumbActiveClass: "swiper-slide-thumb-active",
32         },
33       });
34     },
35     galleryThumbsLunbo() {
36       this.galleryThumbs = new Swiper(".gallery_thumbs", {
37         navigation: {
38           nextEl: ".swiper-button-next",
39           prevEl: ".swiper-button-prev",
40         },
41         spaceBetween: 12, //在slide之間設定距離（單位px）
42         slidesPerView: 4, //設定slider容器能夠同時顯示的slides數量
43         loop: true, //設定為true 則開啟loop模式
44         freeMode: true, //預設為false，普通模式：slide滑動時只滑動一格
45         loopedSlides: 7, //一般設定大於可視slide個數2個即可
46         watchSlidesVisibility: true, //開啟watchSlidesVisibility選項前需要先開啟watchSlidesProgress
47         watchSlidesProgress: true, //開啟這個引數來計算每個slide的progress(進度、程序)
48       });
49     },
50   },
51 };

css Demo:

 1 .prev_right,
 2 .prev_left {
 3   width: 20px;
 4   height: 20px;
 5 }
 6 .swiper-button-next {
 7   width: 26px;
 8   height: 100px;
 9   background: #000000;
10   border-radius: 2px;
11   opacity: 0.3;
12   right: 0;
13   top: 20px;
14   display: flex;
15   align-items: center;
16   justify-content: center;
17 }
18 .swiper-button-prev {
19   width: 26px;
20   height: 100px;
21   background: #000000;
22   border-radius: 2px;
23   opacity: 0.3;
24   left: 0;
25   top: 20px;
26   display: flex;
27   align-items: center;
28   justify-content: center;
29 }
30 .gallery_topimg_name {
31   position: absolute;
32   bottom: 5px;
33   left: 0;
34   width: 100%;
35   background: rgba(0, 0, 0, 0.2);
36   font-size: 14px;
37   font-weight: 400;
38   color: #ffffff;
39   line-height: 20px;
40 }
41 .gallery_topimg_box {
42   position: relative;
43   background: #000;
44   opacity: 0.8;
45 }
46 .gallery_topimg1 {
47   width: 100%;
48   height: 100%;
49 }
50 .gallery_topimg {
51   width: 170px;
52   height: 100px;
53   opacity: 0.6;
54   filter: alpha(opacity=80);
55 }
56 .bannerBox .gallery_top {
57   width: 716px;
58   height: 400px;
59   border: 1px solid #ccd2e7;
60   border-radius: 8px;
61 }
62 .bannerBox .gallery_thumbs {
63   width: 716px;
64   height: 100px;
65 }
66 .bannerBox .swiper-slide-thumb-active .gallery_topimg_box .gallery_topimg {
67   opacity: 1;
68 }
69 .bannerBox .swiper-slide-thumb-active .gallery_topimg_box {
70   background: #fff;
71   opacity: 1;
72 }
73 .bannerBox {
74   margin-bottom: 30px;
75 }

如果css 出問題了 請自行修改，這個是從專案中挑選複製出來的 哈哈哈

最後附上效果圖：