先放一个成功之后的效果吧 移动端h5项目

背景 新开的vue3项目 需要用到层叠轮播图

首先想到了swiper插件，安装之后是 swiper7 版本

注意swiper7只能在vite中直接引入使用，因为它是基于esm模块编写的，webpack默认是cjs规范，不支持esm，除非你在webapck中引入babel 让node_modules 中支持 esm编译
否则 他引入时候的会报错说找不到

vue-awesome-swiper 基于swiper封装的vue组件，但好像不支持vue3 pass， 最近的一次更新也是 两年前。应该是很久没有更新过了
注意从swiper6开始就可以直接支持vue组件使用

npm i swiper@6 --save

想在webpack的vue3中编译通过， 你得安装swiper6版本 这个是支持 cjs导入的，这个在引入就不会再报找不到的问题了

在vue中使用swiper想用到一些效果，得单独在引入这个模块并注册使用

这个我在这里放出我自己项目中的一些参考配置，其他的大同小异 你可以去官网找下api 稍微更改下就可以了
我参考了一个大佬的博客。并稍微更改了下。支持可配置，可以拿过去直接使用
Carousel.vue

<template>
  <swiper
    :autoplay="swiper_options.autoplay"
    :loop="swiper_options.loop"
    :speed="swiper_options.speed"
    :spaceBetween="swiper_options.spaceBetween"
    :coverflowEffect="swiper_options.coverflowEffect"
    :centeredSlides="swiper_options.centeredSlides"
    :slidesPerView="swiper_options.slidesPerView"
    effect="coverflow"
  >
    <swiper-slide :style="[slideStyle]" v-for="item in imgs" :key="item.id"
      ><img :src="item.url" alt=""
    /></swiper-slide>
  </swiper>
</template>
<script>
import { reactive } from "vue";
// 使用swiper的compositon API
import SwiperCore, { Autoplay, EffectCoverflow } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.scss";
SwiperCore.use([Autoplay, EffectCoverflow]);
export default {
  name: "MySwiper",
  props: {
    imgs: {
      type: Array,
      default() {
        return [];
      },
    },
    slideStyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    // swiper相关配置属性放在swiper_options这个变量里
    let swiper_options = reactive({
      autoplay: {
        disableOnInteraction: false, // 鼠标滑动后继续自动播放
        delay: 4000, // 4秒切换一次
      },
      speed: 500, //切换过渡速度
      loop: true,
      slidesPerView: "auto", //解决最后一张切换到第一张中间的空白
      centeredSlides: true, //设置slide居中
      spaceBetween: 20,
      coverflowEffect: {
        rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
        stretch: -10, //每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。
        depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
        modifier: 1, //depth和rotate和stretch的倍率，相当于            depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
        // slideShadows: false, //开启slide阴影。默认 true。
      },
    });
    // 将swiper_options返回给模板中的swiper组件使用
    return { swiper_options };
  },
};
</script>
<style lang="scss">
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

在父组件中调用
Home.vue
// 轮播图展示的高度等配置 直接由父组件 传递过去

<template>
  <Carousel :imgs="imgs" :slideStyle="{ width: '305px', height: '149px'}" />
</template>

<script>
// @ is an alias to /src
import Carousel from "@/components/Carousel/index";
import { reactive } from "vue";
export default {
  name: "Home",
  components: {
    Carousel,
  },
  setup() {
    const imgs = reactive([
      {
        id: 0,
        url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-11-06%2F5fa503c17d566.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637809794&t=0485800307a78fbf328482a8265a6324",
      },
      {
        id: 1,
        url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F382e0af337e355752b70bbba78524c4f384ee4c454ad5-3RKkaF_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637809794&t=ec218c993c5516a7f384837c6ce1bc50",
      },
      {
        id: 2,
        url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F12%2F1f%2Fa0%2F121fa0f4730a034237c13b7595db3a16.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637809794&t=e0537bc9e38339c66ef6315715ad26f3",
      },
    ]);
    return {
      imgs,
    };
  },
  mounted() {},
};
</script>

参考链接： https://blog.csdn.net/qq_44983621/article/details/115732368
其实配置这块 上面博客的博主已经配置不错，我就直接拿来 稍微改了改配置就可以用了。

其实我已经搞出来但就是 不会居中显示，看了上面的那个博客
centeredSlides: true 这个配置没有加的原因

关注我。持续更新前端知识。