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 出问题了 请自行修改，这个是从项目中挑选复制出来的 哈哈哈
最后附上效果图：
标签：opacity,Vue,缩略图,height,width,slide,js,gallery,swiper 来源： https://www.cnblogs.com/HopeInTheDark/p/14875790.html