import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import '../src/assets/common.css'
Vue.use(VueAwesomeSwiper);

 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 export default {
  components: {
   swiper,
   swiperSlide
  }

<template>
  <!--滑动banner -->
 <div class="swiperbanner_container">
  <swiper :options="swiperOption" ref="mySwiper">
   <swiper-slide v-for="(item,index) in BannerList" :key="item.bannerid">
    <img :src="/UploadFiles/2021-04-02/item.imgurl">

需要使用到的参数可以在官方文档中看到具体的含义，点击链接自行查看。
这里有两个参数需要特别注意：
spaceBetween:10
这个参数用于设置两个slide之间的间隙，可根据自己的项目动态修改
observeParents: true
observer: true
观察父组件，当父组件变化时，自己动态改变，刚开始开发的时候我没有设置这个变量，发现滑动的时候特别不流畅，感觉就是普通的滑动效果，无法划一下就跳到下一个完整的slide上去就是因为这个变量没有设置，所以非常重要。
第四步，在需要的文件中引用它，并给他传值，这里不多说，没什么特殊性，和普通的引用方法一样。
第五步，单独实现css样式。
经过了前四步以后，其实还不能完全实现效果图中的样子，我们还需要手动去修改插件中提供的样式。因为我是全局引入，所以修改的样式就放在刚开始说的common.css中。
common.css的内容如下：


/**重写swiper-slider的属性**/
.swiper-slide{
 width:85%;
 /*margin-left: 5px;*/
 /*margin-right: 5px;*/
}
.swiper-slide-active>img{
  height:136px !important;
 }
.swiper-slide-prev,.swiper-slide-next{
 margin-top:10px;
}




实现的思路：将中间处于激活状态的slide高度放大，其中！important不可省略，要不然会失效，将两边的slide分别向下移动一段距离。因为我的slide中只有一张图片，所以我直接修改了图片的高度，如果你的是div的话，你可以换成div的class名称。
刷新后，就是最开始的实现效果啦~
不过这里实现分页，我发现vue中设置分页变量不起作用，目前还未解决，等解决了再来更新，就这样。
希望本文所述对大家vue.js程序设计有所帮助。