Vue中使用Swiper.js实现缩略图

网上看了很多例子，个人感觉官网上也没个全面的Demo，今天写项目将就做个记录（基本功能都满足，可联动）

一、初始化

这个功能是基于swiper版本4.4.0以上的，所以我们要指定版本npm,我这就指定4.4.0为例

 npm install swiper@4.4.1

二、引入

在main.js中引入样式，js

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'
 
在所需页面引入
import Swiper from "swiper";
 
 
这样前期准备就完成了
 
三、准备写代码了(这个demo是根据我项目的页面直接复制的)
html  Demo: 
 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>
View Code

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

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 }
View Code

如果css  出问题了   请自行修改，这个是从项目中挑选复制出来的  哈哈哈

 

最后附上效果图：

 

 

 

posted @ 2021-06-11 16:58  暮雪上的晨星  阅读(1906)  评论(0)  编辑  收藏  举报