vue3+swiper 层叠卡片式banner的实现

swiper暂时还没有这种层叠式的卡片切换效果，遂自己调整之，其实主要就是对active的样式定义...

<template>
<div class="swiperBox">
    <swiper
      :slides-per-view="3"
      :loop="true"
      :autoplay="{
        disableOnInteraction:false,
        delay:5000
      }"
      :centered-slides="true"
      :modules="modules"
      :pagination="{
        el:'.pagination',
        clickable:true
      }"

      >
      <swiper-slide v-for="(item,index) in banners" :key="index">
        <img :src="item">
      </swiper-slide>
    </swiper>
  </div>
  <!-- swiperBox -->

  <div class="pagination"></div>
</template>

<script lang="ts" setup>
import { Autoplay,Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/pagination';

import banner1 from '@/assets/images/banner1.png';
import banner2 from '@/assets/images/banner2.png';
import banner3 from '@/assets/images/banner3.png';
import banner4 from '@/assets/images/banner4.png';
import banner5 from '@/assets/images/banner5.png';

const modules = [Autoplay,Pagination];

</script>

<style lang="scss" scoped>
.swiperBox{
    margin: 0 auto;
    .swiper {
      padding-top: 140px;
      width: 1300px;
      margin-left: -150px;
    }
    img{
      width: 100%;
      display: block;
      border-radius: 4px;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
    }
    ::v-deep .swiper-slide{
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      &::after{
        content: '';
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.6);
        z-index: 11;
        position: absolute;
      }
    }
    ::v-deep .swiper-slide-active{
      // transform: scale(2.4);
      // -webkit-transform: scale(2.4);
      position: relative;
      height: 320px;
      overflow: visible;
      z-index: 11;
      img{
        // width: 800px;
        transform: scale(2);
        -webkit-transform: scale(2);
        transform-origin: center !important;
        -webkit-transform-origin:center !important;
        position: absolute;
        left: 0;
        box-shadow: 0px 0px 20px rgba($color: #000000, $alpha: 0.6);
      }
      z-index: 111;
      &::after{
        display: none;
      }
    }
  }
  .pagination{
    text-align: center;
    ::v-deep .swiper-pagination-bullet{
      width: 25px;
      height: 25px;
      background: white;
      border-radius: 6px;
      margin: 0 15px;
      opacity: 1;
      cursor: pointer;
      &.swiper-pagination-bullet-active{
        background: #FFDC1D;
      }
    }
  }
</style>