(vue)用vue-awesome-swiper轮播展示小图，点击小图展示大图

详情页展示多张图片的效果：

使用的是 "vue-awesome-swiper": "^4.1.1"

<div class="white_bg flexBoxCenter">
    <div class="imgMain flexBoxCenter ">
      <img :src="resourceImgSrc" alt=""/>
    </div>
</div>
<div class="swiper-box">
    <SwiperImgList @changeResourceImgSrc="changeResourceImgSrc" :resourceImgSrcArr="resourceImgSrcArr"/>
</div>

下面的轮播封装成组件SwiperImgList

<template>
  <div style="margin-bottom: 20px">
    <swiper :options="swiperOption" ref="mySwiper" class="my-swiper">
      <swiper-slide v-for="(i, index) in resourceImgSrcArr" :key="index">
        <img
          :src="i.clientfullpath"
          alt=""
          width="47px"
          height="47px"
          style="box-sizing: border-box; cursor: pointer"
          :class="{ swiperActive: activeIn == index }"
          @click="changeImg(i.clientfullpath, index)"
        />
      </swiper-slide>
  <!-- 箭头 -->
      <div class="swiper-button-prev" slot="button-prev" @click="prevSlide">
        <
      </div>
      <div class="swiper-button-next" slot="button-next" @click="nextSlide">
        >
      </div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "SwiperImgList",
  data() {
    return {
      activeIn: "",
      swiperOption: {
        loop: false, // 是否循环轮播
        autoplay: false, // 是否可以自动轮播
        slidesPerView: 4, // 可视区域内可展示多少个块
        initialSlide: 0, // 默认初始显示块
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  methods: {
    changeImg(src, index) {
      this.activeIn = index;
      this.$emit("changeResourceImgSrc", src);
    },
    nextSlide() {
      // 通过 this.$refs.mySwiper 来访问 Swiper 实例
      if (this.$refs.mySwiper) {
        this.$refs.mySwiper.$swiper.slideNext(); // 调用 swiper 实例的 slideNext 方法
      }
    },
    prevSlide() {
      if (this.$refs.mySwiper) {
        this.$refs.mySwiper.$swiper.slidePrev();
      }
    },
  },
  props: {
    resourceImgSrcArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
};
</script>

<style lang="stylus" scoped>
.my-swiper {
  ::v-deep .swiper-wrapper {
    width: calc(100% - 60px);
    margin: 0 30px;
  }

  .swiper-button-next, .swiper-button-prev {
    height: 100%;
    margin-top: 0px;
    background-image: none;
    color: #888888;
    text-align: center;
    background: #EEEEEE;
    top: 0px;
    line-height: 47px;
  }

  .swiper-button-prev {
    left: 0px;
  }

  .swiper-button-next {
    right: 0px;
  }

  .swiper-slide {
    height: 47px;
    width: 50px !important;
    margin: 0 5px;
  }

  .swiperActive {
    border: 2px solid #007aff;
  }
}
</style>