经过了前四步以后，其实还不能完全实现效果图中的样子，我们还需要手动去修改插件中提供的样式。因为我是全局引入，所以修改的样式就放在刚开始说的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中设置分页变量不起作用，目前还未解决，等解决了再来更新，就这样。