vue swiper开发中间大两边小轮播图

前言

项目中有需求实现中间大两边小轮播图需求，打算用swiper实现。

实现思路

开始考虑是通过一屏展示三张图片，配合控制间距与样式实现，结果每张图片宽度都被压缩。 最后发现swiper中有effect配置参数，配合样式可以很好的实现效果。

配置代码

{ effect: 'coverflow', slidesPerView: 'auto', centeredSlides: true, autoplay: true, notNextTick: true, observer: true, observeParents: true, loop: true, initialSlide: 0, direction: 'horizontal' }