vue-swiper多图片，缩略图双向控制

vue-awesome-swiper: 4.1.1

swiper: 5.4.5

效果图:

 

代码:

<template>
  <div class="box">
    <div class="swiper-box">
      <!-- swiper1 -->
      <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
        <swiper-slide v-for="item in fileList" :key="item">
          <div class="swiper-item">
            <div class="swiper-img" style="width: 100%; height: 100%">
              　<img :src="item" style="width: 100%; height: 100%" alt="" />
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div
        class="swiper-button-next swiper-button-white"
        slot="button-next"
      ></div>
      <div
        class="swiper-button-prev swiper-button-white"
        slot="button-prev"
      ></div>

      <!-- swiper2 Thumbs -->
      <swiper
        :options="swiperOptionThumbs"
        class="gallery-thumbs"
        ref="swiperThumbs"
        style="margin-top: 20px"
      >
        <swiper-slide v-for="item in fileList" :key="item">
          <img :src="item" style="width: 100%; height: 100%" />
        </swiper-slide>
      </swiper>
      <div class="swiper-thumbs-next swiper-button-white" slot="button-next">
       <svg t="1632625587130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3459" width="32" height="32"><path d="M384 512L731.733333 202.666667c17.066667-14.933333 19.2-42.666667 4.266667-59.733334-14.933333-17.066667-42.666667-19.2-59.733333-4.266666l-384 341.333333c-10.666667 8.533333-14.933333 19.2-14.933334 32s4.266667 23.466667 14.933334 32l384 341.333333c8.533333 6.4 19.2 10.666667 27.733333 10.666667 12.8 0 23.466667-4.266667 32-14.933333 14.933333-17.066667 14.933333-44.8-4.266667-59.733334L384 512z" p-id="3460" fill="#999999"></path></svg>
      </div>
      <div class="swiper-thumbs-prev swiper-button-white" slot="button-prev">
        <svg t="1632625518037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3165" width="32" height="32"><path d="M731.733333 480l-384-341.333333c-17.066667-14.933333-44.8-14.933333-59.733333 4.266666-14.933333 17.066667-14.933333 44.8 4.266667 59.733334L640 512 292.266667 821.333333c-17.066667 14.933333-19.2 42.666667-4.266667 59.733334 8.533333 8.533333 19.2 14.933333 32 14.933333 10.666667 0 19.2-4.266667 27.733333-10.666667l384-341.333333c8.533333-8.533333 14.933333-19.2 14.933334-32s-4.266667-23.466667-14.933334-32z" p-id="3166" fill="#999999"></path></svg>
      </div>
    </div>
    <div class="bottom-box">
      <img src="../../assets/img/bottom_b.jpg" class="bottom-b-img" />
      <div class="bottom-b-color">
        <img src="../../assets/img/bottom_text.png" class="bottom-img" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
  position: relative;
  background-color: #fff;
  padding-top: 40px;
}
/* .swiper-container {
  background-color: #000;
} */
.swiper-box {
  width: 960px;
  margin: auto;
}
.gallery-top {
  height: 80% !important;
  width: 100%;
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
.swiper-slide {
  text-align: center;
  height: 600px;
  display: flex;
  transition: 300ms;
  transform: scale(0.6);
  opacity: 0.3;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
.swiper-slide-next {
  opacity: 0.7;
  transform: scale(0.8);
  z-index: 998 !important;
}
.swiper-slide-prev {
  opacity: 0.7;
  transform: scale(0.8);
}
.swiper-slide-active {
  opacity: 1;
  z-index: 999 !important;
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
  --swiper-navigation-color: #999 !important;
  top: 330px;
}
.gallery-thumbs .swiper-slide {
  height: 180px !important;
}
.gallery-thumbs .swiper-slide-active {
  border: 4px solid #006c95;
}
.swiper-thumbs-next{
  position: absolute;
  top: 740px;
  left: 170px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
}
.swiper-thumbs-prev{
  position: absolute;
  top: 740px;
  right: 170px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
}
.bottom-box {
  width: 100%;
  height: 400px;
  position: relative;
  margin-top: 40px;
}
.bottom-b-img {
  width: 100%;
  height: 100%;
  position: absolute;
}
.bottom-b-color {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  background: rgba(0, 108, 149, 0.6);
  display: flex;
  align-items: center;
}
.bottom-img {
  width: 400px;
  height: 100px;
  margin: auto;
}
</style>
<script>
var vm = null;
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  name: "pageheader",
  components: {
    Swiper,
    SwiperSlide,
  },

  data() {
    return {
      fileList: [
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      swiperOptionThumbs: {
        loop: true, // 循环模式选项
        spaceBetween: 0,
        slidesPerView: 8,
        centeredSlides: true, //设置活动块居中
        slideToClickedSlide: true,
        navigation: {
          prevEl: ".swiper-thumbs-next",
          nextEl: ".swiper-thumbs-prev",
        },
        on: {
          slideChangeTransitionStart: function () {
            vm.$refs.swiperTop.$swiper.slideToLoop(this.realIndex, 1000, false);
          },
        },
      },
      swiperOptionTop: {
        loop: true, // 循环模式选项
        // autoplay: true, //自动循环
        slidesPerView: 4, //设置slider容器能够同时显示的slides数量(carousel模式)。
        spaceBetween: -100, //在slide之间设置距离（单位px）。
        centeredSlides: true, //设置活动块居中
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          slideChangeTransitionStart: function () {
            if (vm.$refs.swiperThumbs.$swiper != undefined) {
              console.log(
                vm.$refs.swiperThumbs.$swiper.slideToLoop(
                  this.realIndex,
                  1000,
                  false
                )
              );
            }
          },
        },
      },
    };
  },
  created() {
    vm = this;
  },
  mounted() {
  },
  methods: {
  },
};
</script>