vue-awsome-swipe 带缩略图

安装
引入

import {
    swiper,
    swiperSlide
} from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

HTML

<swiper ref="mySwiper" :options="swiperOptions" class="gallery-top" v-if="picturesMiddleList.length > 1">
   <swiper-slide v-for="(item, index) in picturesMiddleList" :class="`slide-${index + 1}`" :key="index">
        <img :src="item.url" alt="" />
    </swiper-slide>
    <div class="swiper-button swiper-button-prev" slot="button-prev">
        <i class="iconfont icon-fanyezuo"></i>
    </div>
    <div class="swiper-button swiper-button-next" slot="button-next">
        <i class="iconfont icon-fanyeyou"></i>
    </div>
</swiper>
<!-- swiper2 Thumbs -->
<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs" v-if="picturesMiddleList.length > 1">
    <swiper-slide v-for="(item, index) in picturesMiddleList" :class="`slide-${index + 1}`" :key="index">
        <div class="img-box">
            <img :src="item.url" alt="" />
        </div>
        <div class="short-introduce">
            {{item.content}}
        </div>
    </swiper-slide>
</swiper>

data选项配置项

data(){
	return {
		//轮播大图配置
            swiperOptions: {
                spaceBetween: 10,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev"
                },
                // observer: true, //修改swiper自己或子元素时，自动初始化swiper
                // observeParents: true, //修改swiper的父元素时，自动初始化swiper
                // observeSlideChildren: true,
                loop: true, //设置循环
                slidesPerView: "auto",
                loopedSlides: 2, //必须设置
                grabCursor: true,
                autoplay: true,
                on: {
                    slideChangeTransitionEnd: function () {
                        let el = this.$el.children().children()[this.activeIndex]
                            .firstElementChild; //切换结束时，告诉我现在是第几个slide
                        if (el.localName == "video") {
                            el.play();
                            this.autoplay.stop();
                            el.addEventListener("ended", () => {
                                this.autoplay.start();
                            });
                        }
                    }
                }
            },
            //轮播缩略图配置
            swiperOptionThumbs: {
                loop: true, //设置循环
                loopedSlides: 2, //必须设置
                spaceBetween: 10,
                centeredSlides: true,
                slidesPerView: "auto",
                touchRatio: 0.2,
                slideToClickedSlide: true
            },
	}

}

初始化

//获取中间轮播图数据
 getCenterPictures() {
      this.$http
          .get(this.$api.home.picturesMiddle)
          .then(res => {
              this.picturesMiddleList = res.data
              //中间轮播图相关
              this.$nextTick(() => {
                  const swiperTop = this.$refs.mySwiper.swiper;
                  const swiperThumbs = this.$refs.swiperThumbs.swiper;
                  swiperTop.controller.control = swiperThumbs;
                  swiperThumbs.controller.control = swiperTop;

                  // swiperTop.slideTo(3, 1000, false)和自动轮播冲突
                  /*鼠标移入停止轮播，鼠标离开 继续轮播*/
                  const centerSwiperContainer = document.getElementsByClassName(
                      "swiper-container"
                  )[0];
                  this.swiperBindEvent(centerSwiperContainer, swiperTop);
              });

          })
          .catch(() => {});
  },

踩过得坑，
1.swiper 的版本4.XX，vue-awesome-swiper 版本3.xx,版本不对很容易出问题
2.当轮播错乱时候，尝试修改loopedSlides，slidesPerView这几个属性，具体怎么改可以看下swiper4的文档，
实现的效果
描述文字要跟着图片一起轮播，这个用样式就可以实现
思路：先设置所有的透明度为0，然后设置带有当前激活类名 文字的透明度为1

.short-introduce {
    width: 49rem;
       opacity: 0;
       position: absolute;
       left: -20rem;
       margin-top: 1rem;
   }
   .gallery-thumbs .swiper-slide-active {

      >div.img-box {
           opacity: 1;
       }

       .short-introduce {
           opacity: 1;
       }
   }