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

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

新年新气象，学技术就要学最新的 小伙伴们在开发项目当中
总是会遇到各种轮播图 今天给大家解释一个swiper6+中的异型轮播图

当然这个图，根据参数不一样，展示效果还是会有些变化的

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

npm install swiper --save

2、在vue3中引入swiper

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

3、接下来就是在html里面使用，并且绑定相对应的参数

 <swiper
      :initial-slide="1"    
      :centered-slides="true" 
      :slides-per-view="1.8"  
      :effect="'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>

4、参数解读

initial-slide ---------- 展示第几张 默认0

centered-slides --------- 展示的那张居中显示 默认居左

slides-per-view ------------ 可以看到多少张 默认1

effect --------------轮播图的形式 coverflow是异型轮播 注意了：一定要用 绑定变量的方式绑定字符串 不然不生效

coverflow-effect ---------------异型轮播图参数 在下面第5点介绍

@swiper -----轮播事件

@slideChange -----轮播事件 这两个没多大区别在我看来 一般用一个就行

5、接下来就是javascript部分

export default {
  setup() {
    let coverflowEffect = {
      rotate: 0, 
      stretch: -50,
      depth: 100, 
      modifier: 1, 
      slideShadows: false 
    };
    onMounted(() => {});
    return {
      coverflowEffect
    };
  },
  components: {
    Swiper,
    SwiperSlide
  }
};

rotate -------------slide做3d旋转时Y轴的旋转角度。默认50。

stretch ----------------每个slide之间的拉伸值，越大slide靠得越紧。

depth -------------slide的位置深度。值越大z轴距离越远，看起来越小。

modifier --------------depth和rotate和stretch的倍率，相当于depthmodifier、rotatemodifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。

slideShadows -----------------开启slide阴影。默认 true。

6、可参考官方网站的例子

效果例子：sxs1995.github.io/vueSwiper/d… 第三个
swiper文档：www.swiper.com.cn/api/effects…
swiper的dom例子：swiperjs.com/demos#effec…
可以操作的异型例子（从上面的dom可以进入）：codesandbox.io/s/9d7vl?fil…