VueAwesomeSwiper的异形轮播

需求：实现异形轮播，用的swiper插件
效果图：https://www.swiper.com.cn/demo/index.html

1.进入项目目录，安装swiper和vue-awesome-swiper、

npm install vue-awesome-swiper --save
npm install swiper

2.引入资源（main.js文件)

import VueAwesomeSwiper from 'vue-awesome-swiper'
// import 'swiper/swiper-bundle.css'(swiper6的引入css)
import 'swiper/css/swiper.css'  //引入样式(swiper5的引入css)
Vue.use(VueAwesomeSwiper)

3.使用

 <swiper :options="swiperOption" ref="mySwiper" v-if="loop.length > 0">
      <swiper-slide><img class="swiper-slide" src="../banner1.jpg" /></swiper-slide>
      <swiper-slide><img class="swiper-slide" src="../banner2.jpg" /></swiper-slide&g