vue3+vite4使用swiper10实现coverflow效果

　　<Swiper

        class="swiper-container mt-40px"

        :modules="modules"

        :loop="true"

        :autoplay="{

          delay: 5000,

        }"

        :speed="1000"

        :slidesPerView="2"

        :centeredSlides="true"

        effect="coverflow"

        :coverflowEffect="{

          rotate: 0,

          stretch: 300,

          depth: 500,

          modifier: 1,

          scale: 0.9,

          slideShadows: false,

        }"

        @swiper="onSwiper"

      >

        <SwiperSlide v-for="item in swipeItems" :key="item" class="item">

          <img :src="item" class="w-781px h-559px" />

        </SwiperSlide>

   </Swiper>

　　// 轮播手动切换

　　<div class="flex mt-20px">

        <i class="arrow mr-30px" @click="swiper.slidePrev()"></i>

        <i class="arrow rotate-180" @click="swiper.slideNext()"></i>

    </div>

 

　　

　　import { Swiper, SwiperSlide } from 'swiper/vue'

　　import { Autoplay, EffectCoverflow } from 'swiper/modules'

　　import 'swiper/css'

　　import 'swiper/css/autoplay'

 

　　const modules = [Autoplay, EffectCoverflow]

　　const swipeItems = [FourImg0, FourImg1, FourImg2, FourImg3, FourImg4]

　　const swiper = ref()

　　const onSwiper = s => {

  　　swiper.value = s

　　}

 

中文文档：https://www.swiperjs.net/vue

swiper的api文档：https://www.swiper.com.cn/api/

参考例子：https://codepen.io/shams-sujon/pen/LQvWwX