frontend/src/views/components/carouselChart2.vue

<template>
  <!-- banner区域 -->
  <div class="banner">
    <div class="wrapper">
      <div class="swiper-box" style="height: 500px" v-if="childDataList.length">
        <!-- swiper1 -->
        <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
          <swiper-slide class="" v-for="item in childDataList" :key="item.id">
            <img :src="item.path" alt="" style="width: 100%" />
          </swiper-slide>

          <div
            class="swiper-button-next swiper-button-white"
            slot="button-next"
          ></div>
          <div
            class="swiper-button-prev swiper-button-white"
            slot="button-prev"
          ></div>
        </swiper>
        <!-- swiper2 Thumbs -->
        <swiper
          :options="swiperOptionThumbs"
          class="gallery-thumbs"
          ref="swiperThumbs"
        >
          <swiper-slide class="" v-for="item in childDataList" :key="item.id">
            <img :src="item.path" alt="" style="height: 100%; width: 100%" />
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    terminalPhoto: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      childDataList: [],

      swiperOptionTop: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper

        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  watch: {
    terminalPhoto: {
      handler(val) {
        console.log("dataObj deep change", val);
        this.childDataList = val;
        console.log(this.childDataList);
      },
      deep: true, // 深度监听
      immediate: true, // 初次监听即执行
    },
  },
  methods: {},
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  },
};
</script>
<style lang="less" scoped>
.banner {
  .wrapper {
    width: 100%;
    //margin: 300px auto;
  }
}

.swiper-container {
  background-color: #fff;
}
swiper-slide {
  img {
    width: 100%;
    height: 100%;
  }
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.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;
}
</style>