vue3中swiper纵向上下叠加轮播图

<!--纵向轮播-->
<template>
  <div class="swiper-box">
    <swiper
        :direction="'vertical'"
        :slidesPerView="3.9"
        :mousewheel="true"
        :modules="modules"
        :centeredSlides="true"
        :watchSlidesProgress="true"
        :loop="true"
        @slideChange="onSlideChange"
        class="vertical-swiper"
    >
      <swiper-slide v-for="(item, index) in state.q4List"
                    class="list-view"
                    :key="item.id"
                    :class="{'active': index == 1}"
      >
        <div class="item-view">
          <img src="https://img1.baidu.com/it/u=2828363083,1105406468&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="志愿深圳">
          <div class="info">
            <label>李雪琴</label>
            <p>{{item.describe}}</p>
            <div class="time">
              <small>2022-03-19 16:27:10</small>
              <span>
                    <i class="iconfont icon-a-dianzan2"></i>
                    8740
                  </span>
            </div>
          </div>
        </div>
      </swiper-slide>

    </swiper>
  </div>
</template>

<script lang="ts" setup>
import {Swiper, SwiperSlide} from "swiper/vue";
import { EffectCoverflow, Mousewheel} from "swiper";

import "swiper/css/effect-coverflow";
import WOW from "*.js";
const modules = [EffectCoverflow, Mousewheel]

const state:any = reactive({
  q4List: [
    {
      id: 1,
      describe: '两小时深圳青年突击队紧急集结'
    },{
      id: 2,
      describe: '深圳3.7万名青年突击队员奋战抗疫一线'
    },{
      id: 3,
      describe: '深圳青年志愿服务队支援抗疫'
    },{
      id: 4,
      describe: '抗疫一线，青年担当'
    }
  ],
})

// 轮播图切换
const onSlideChange = (e: any) => {
  let { slides } = e
  for (let i = 0; i < slides.length; i++) {
    let slide = slides.eq(i)
    let progress = slides[i].progress
    slide.css({
      'opacity': '',
      'background': ''
    });
    slide.transform('');//清除样式
    slide.transform('scale(' + (1 - Math.abs(progress) / 8) + ')');
  }
};

</script>

<style lang="scss" scoped>
.swiper-box{
  margin-top: 30vh;
  width: 800px;
}
.vertical-swiper{
  height: 600px;
  ::v-deep(.swiper-slide-active){
    z-index: 999;
    .item-view{
      border: 1px solid #E60012;
      box-shadow: 0px 0px 20px 20px rgba(230, 0, 18, 0.03);
      &:before{
        background: transparent;
      }
    }
  }
}
.list-view{
  .item-view{
    height: 120px;
    background: #FFFFFF;
    border-radius: 30px;
    display: flex;
    padding: 30px;
    position: relative;
    overflow: hidden;
    &:before{
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.5);
    }

    img{
      width: 100px;
      flex: 0 0 100px;
      height: 100px;
      overflow: hidden;
      border-radius: 50%;
      margin-right: 23px;
    }
    label{
      font-size: 24px;
      font-weight: 400;
      color: #727272;
      line-height: 24px;
    }
    .info{
      flex: 1;
    }
    p{
      width: 95%;
      font-size: 34px;
      font-weight: 500;
      color: #1D1F24;
      line-height: 34px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 15px 0 25px;
    }
    .time{
      font-size: 20px;
      font-weight: 300;
      color: #999999;
      line-height: 20px;
      span{
        float: right;
        margin-right: 35px;
        color:#E60012;
        i{
          vertical-align: top;
        }
      }
    }
  }
}
</style>