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                   
33                 />
34               </div>
35               <div class="swiper-button-next">
36                 <img
37                   class="prev_right"
38                   src="../../assets/icon_right.png"
39                   
40                 />
41               </div>
42             </div>
43           </div>
44         </div>

 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 };

 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 }