vue + swiper7 双向控制

大图和缩略图双向控制

html： 循环展示图片

     <div
        style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
        class="swiper mySwiper2"
        ref="mySwiper2"
      >
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in bigImg" :key="item.imageId">
        <!-- 所有“可缩放”图像都应该用带有swiper-zoom-container类的 div 包装。 -->
            <div class="swiper-zoom-container">
              <img :src="item.originalUrlSrc" alt="" class="img" ref="imgDiv" />
            </div>
          </div>
        </div>
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
      </div>

      <div thumbsSlider="" class="swiper mySwiper" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in bigImg" :key="item.imageId">
            <img :src="item.originalUrlSrc" alt="" class="img" ref="imgDiv" />
          </div>
        </div>
      </div>

 js： 

可以解决动态数据缩略图未选中问题

observer: true, //修改swiper自己或子元素时，自动初始化swiper
 observeParents: true, //修改swiper的父元素时，自动初始化swiper

使用swiper动态加载数据遇到的坑 - 灰信网（软件开发博客聚合）

//方法放在获取图片数组后 在初始化swiper
 initswiper() {
      let that = this;
      that.realIndex = ""; 

      if (this.swiperThumbs) {
        this.swiperThumbs.destroy && this.swiperThumbs.destroy();
      }

      //缩略图
      this.swiperThumbs = new Swiper(".mySwiper", {
        initialSlide: 0,
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true //修改swiper的父元素时，自动初始化swiper
      });

      if (this.swiperTop) {
        this.swiperTop.destroy && this.swiperTop.destroy();
      }
     //大图
      this.swiperTop = new Swiper(".mySwiper2", {
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        zoom: true,  //双击放大/缩小
        initialSlide: 0,
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        thumbs: {
          swiper: this.swiperThumbs
        },
        on: {
          slideChange: function(swiper) {
           //切换swiper 获取当前图片下标对应的imageId 查询相关信息
            that.realIndex = that.$refs.mySwiper2.swiper.realIndex;
            let num = that.bigImg[that.realIndex].imageId;
            if (that.flag == 2) that.getImgPestNum(num);
          }
        }
      });
    },

 css:

<style lang="scss" scoped>
  .mySwiper2 {
    height: 68%;
    width: 100%;
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      width: 100%;
      height: 100%;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      img {
        display: block;
        width: 100%;
        height: 100%;
        // object-fit: cover;
      }
    }
  }

  .mySwiper {
    height: 22%;
    box-sizing: border-box;
    padding: 10px 0;
  }

  .mySwiper .swiper-slide {
    width: 24%;
    height: 100%;
    opacity: 0.4;
  }

  .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    // object-fit: cover;
  }

 //改变左右切换箭头颜色
  /deep/ .swiper-button-prev:after,
  .swiper-rtl .swiper-button-next:after {
    color: white !important;
  }
  /deep/ .swiper-button-next:after,
  .swiper-rtl .swiper-button-prev:after {
    color: white !important;
  }
</style>

 参考：

下载Swiper - Swiper中文网       

 其他可实现双向控制swiper：

🚥 Vue Slick Carousel with True SSR Written for Faster Luxstay

（注：v-if="bigImg.length != 0“  否则数据未加载完就初始化会报错）

slick - the last carousel you'll ever need