frontend/src/views/components/carouselChart.vue

<template>
  <div class="thumb-example">
    <!-- swiper1 -->
    <swiper
      class="swiper gallery-top"
      :options="swiperOptionTop"
      ref="swiperTop"
    >
      <swiper-slide
        class="slide-1"
        v-for="item in terminalPhoto"
        :key="item.id"
      >
        <viewer class="bigimg">
          <img :src="item.path" alt="" />
        </viewer>
      </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
      class="swiper gallery-thumbs"
      :options="swiperOptionThumbs"
      ref="swiperThumbs"
    >
      <swiper-slide
        class="slide"
        v-for="(item, index) in terminalPhoto"
        :key="item.id"
      >
        <img :src="item.path" alt="" />
        <p class="timeInfo">
          {{ $moment(item.photoTime).format("YYYY-MM-DD ") }}
        </p>
      </swiper-slide>
      <!-- <div
        v-if="terminalPhoto.length !== 1"
        class="swiper-button-next swiper-button-white"
        slot="button-next"
      ></div>
      <div
        v-if="terminalPhoto.length !== 1"
        class="swiper-button-prev swiper-button-white"
        slot="button-prev"
      ></div> -->
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    terminalPhoto: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    // 实现swiper双向控制
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  },
  data() {
    return {
      swiperOptionTop: {
        //zoom: true,//缩放功能
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        //spaceBetween: 10,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        // autoplay: {
        //   //自动轮播
        //   delay: 2000,
        //   disableOnInteraction: false,
        // },
        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",
        },
      },
    };
  },

  methods: {},
};
</script>
<style lang="less">
.thumb-example {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  .gallery-top {
    //background: #fcc;
    width: calc(100% - 6px);
    height: 80%;
    overflow: hidden;
    border: 3px solid transparent;
    .slide-1 {
      width: 100%;
      overflow: hidden;
      .bigimg {
        width: 100%;
        height: 100%;
      }
      img {
        width: 100%;
        height: 100%;
        // object-fit: cover;
      }
    }
  }
  .gallery-thumbs {
    width: 100%;
    height: 18%;
    .slide {
      width: 20%;
      border: 3px solid transparent;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      img {
        width: 100%;
        height: 100%;

        //object-fit: cover;
      }
    }

    .timeInfo {
      position: absolute;
      bottom: 0px;
      width: 100%;
      background: #f0f0f0;
      padding: 8px 0px;
      font-size: 14px;
      text-align: center;
      color: @color-text-primary;
    }
  }

  .swiper-button-next.swiper-button-white,
  .swiper-container-rtl .swiper-button-prev.swiper-button-white,
  .swiper-button-prev.swiper-button-white,
  .swiper-container-rtl .swiper-button-next.swiper-button-white {
    width: 40px;
    height: 40px;
    border-radius: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .swiper-button-next.swiper-button-white,
  .swiper-container-rtl .swiper-button-prev.swiper-button-white,
  .swiper-button-prev.swiper-button-white,
  .swiper-container-rtl .swiper-button-next.swiper-button-white {
    background-size: 45% 45%;
  }
  .gallery-thumbs {
    .swiper-button-next.swiper-button-white,
    .swiper-container-rtl .swiper-button-prev.swiper-button-white,
    .swiper-button-prev.swiper-button-white,
    .swiper-container-rtl .swiper-button-next.swiper-button-white {
      top: 60%;
    }
  }
}
</style>