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

 <swiper
      :initial-slide="1"    ----------  展示第几张  默认0
      :centered-slides="true"  ---------  展示的那张居中显示   默认居左
      :slides-per-view="1.8"  ------------   可以看到多少张  默认1
      :effect="'coverflow'"   --------------轮播图的形式   coverflow是异型轮播    注意了：一定要用 绑定变量的方式绑定  不然不生效
      :coverflow-effect="coverflowEffect"  ---------------异型轮播图参数   在下面
      @swiper="onSwiperChange"   -----轮播事件
      @slideChange="onSwiperChange" -----轮播事件   这两个没多大区别在我看来  一般用一个就行
    >
    	  <swiper-slide>
		        <img src="" />
     	  </swiper-slide>
     	  <swiper-slide>
		        <img src="" />
     	  </swiper-slide>
     	  <swiper-slide>
		        <img src="" />
     	  </swiper-slide>
  </swiper>

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