一个小轮播图

用VUE3+Swipe实现了一个带缩略图的轮播图 展示为

代码如下：

    <div class="swiper-box">

            <swiper :navigation="true" :modules="modules" class="mySwiper2" :loop="true"
              :thumbs="{ swiper: thumbsSwiper }">
              <swiper-slide v-for="item in supplyImg" :key="item">
                <img :src="item" alt="">
              </swiper-slide>
            </swiper>

            <swiper @swiper="setThumbsSwiper" :loop="true" :spaceBetween="10" :slidesPerView="3" :freeMode="true"
              :watchSlidesProgress="true" :modules="modules" class="mySwiper">
              <swiper-slide v-for="item in supplyImg" :key="item">
                <img :src="item" alt="">
              </swiper-slide>
            </swiper>

          </div>

export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup () {
      const supplyData = ref({})
      const route = useRoute()
      const supplyId = route.params.supply_id
      const supplyImg = ref([])
      const supplyDetail = () => {
        console.log("supplyCategory~");
        getSupplynDetail(
          {
            supply_info: {
              supply_id: supplyId
            }
          },
          (status, res, data) => {
            supplyData.value = data.supply_infos[0]
            supplyImg.value = JSON.parse(supplyData.value.supply_scroll_images)
            console.log("supplyImg", supplyImg.value);
          },
          (status, error, msg) => {
            console.log('status: ', status)
            console.log('error: ', error)
            console.log('msg: ', msg)
            PromptMessage.messageBoxError('错误提示', msg)
          }
        )
      }

      let thumbsSwiper = ref(null);

      const setThumbsSwiper = (swiper) => {
        thumbsSwiper.value = swiper;
      }

      return {
        rate, modules: [Navigation, FreeMode, Thumbs],
        supplyDetail, supplyData, supplyId, supplyImg, thumbsSwiper, setThumbsSwiper
      }
    },
    mounted () {
      this.supplyDetail()
    }
  }

 .swiper-box {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 30px;

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        // background: #fff;

        /* 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;
        background-size: cover;
        background-position: center;

        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

      }

      .mySwiper2 {
        position: relative;
        // float: left;
        height: 100%;
        width: 100%;
        border-radius: 12px;
      }

      .mySwiper {
        position: relative;
        margin-top: 5%;
        float: left;
        // margin-left: 3%;
        width: 100%;
        height: 70%;
        box-sizing: border-box;
        padding: 10px 0;


        .swiper-slide {
          width: 100%;
          height: 33%;
          opacity: 0.4;

          img {
            border-radius: 4%;
          }
        }

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

      .swiper-cover {
        position: absolute;
        width: 100%;
        height: 30%;
        background-color: rgba(0, 0, 0, 0.6);
        bottom: 0%;
        right: 0%;
        z-index: 100;

      }

      .swipercover-top {
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        height: 30%;
        color: white;
        border-bottom: 2px solid dodgerblue
      }

      .swipercover-top-text {
        width: 15%;
        height: 100%;
        border-bottom: 2px solid red;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .swipercover-bottom {
        margin-left: 10%;
        width: 100%;
        height: 70%
      }
    }