vue3使用swiper6+版本实现异型轮播图

首先下载swiper，默认为最新版本

npm install swiper --save

引入

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.scss';
import SwiperCore, { EffectCoverflow } from 'swiper/core';
SwiperCore.use([EffectCoverflow]);

html

vue.js

export default {
  setup() {
    let coverflowEffect = {
      rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
      stretch: -50, //每个slide之间的拉伸值，越大slide靠得越紧。
      depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。
      modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
      slideShadows: false //开启slide阴影。默认 true。
    };
    onMounted(() => {});
    return {
      coverflowEffect
    };
  },
  components: {
    Swiper,
    SwiperSlide
  }
};

效果例子：https://sxs1995.github.io/vueSwiper/dist/index.html#/ 第三个
swiper文档：https://www.swiper.com.cn/api/effects/196.html
swiper的dom例子：https://swiperjs.com/demos#effect-coverflow
可以 *** 作的异型例子（从上面的dom可以进入）：https://codesandbox.io/s/9d7vl?file=/src/App.vue