swiper3D覆盖流的实现方法 vue3+nuxt3

<template>
  <div class="swiper-container">
    <client-only>
      <Swiper
        :effect="'coverflow'"
        :grab-cursor="true"
        :centered-slides="true"
        :slides-per-view="slidesPerView"
        :coverflow-effect="{
          rotate: 30,
          stretch: 50,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        }"
        :loop="true"
        :pagination="{
          clickable: true
        }"
        :navigation="true"
        :modules="modules"
        :breakpoints="breakpoints"
      >
        <SwiperSlide>
          <img src="../assets/imgs/cover/1.png" alt="图片1">
        </SwiperSlide>
        <SwiperSlide>
            <img src="../assets/imgs/cover/2.png" alt="图片1">
        </SwiperSlide>
        <SwiperSlide>
            <img src="../assets/imgs/cover/3.png" alt="图片1">
        </SwiperSlide>
        <SwiperSlide>
            <img src="../assets/imgs/cover/4.png" alt="图片1">
        </SwiperSlide>
        <SwiperSlide>
            <img src="../assets/imgs/cover/1.png" alt="图片1">
        </SwiperSlide>
        <SwiperSlide>
            <img src="../assets/imgs/cover/1.png" alt="图片1">
        </SwiperSlide>
        <SwiperSlide>
            <img src="../assets/imgs/cover/1.png" alt="图片1">
        </SwiperSlide>
        <SwiperSlide>
            <img src="../assets/imgs/cover/1.png" alt="图片1">
        </SwiperSlide>
      </Swiper>
    </client-only>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { EffectCoverflow, Navigation, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/effect-coverflow'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

const modules = [EffectCoverflow, Navigation, Pagination]

const breakpoints = {
  320: {
    slidesPerView: 2,
    spaceBetween: 10
  },
  // 当屏幕宽度 >= 768px
  768: {
    slidesPerView: 3,
    spaceBetween: 20
  },
  // 当屏幕宽度 >= 1024px
  1024: {
    slidesPerView: 4,
    spaceBetween: 30
  }
}

// 默认幻灯片数量
const slidesPerView = ref(3)
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 400px;
  margin: 50px auto;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .swiper-container {
    width: 95%;
    height: 250px;
    margin: 30px auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .swiper-container {
    width: 90%;
    height: 200px;
    margin: 40px auto;
  }
}

@media (min-width: 1024px) {
  .swiper-container {
    width: 100%;
    height: 400px;
    margin: 50px auto;
  }
}
</style>