运用vue-awesome-swiper实现一个slide居中一个缩小显示

运用vue-awesome-swiper实现一个slide居中一个缩小显示

效果图

HTML代码

<swiper
  ref="cardSwiper"
  :options="cardSwiperOption"
>
  <swiper-slide />
  <swiper-slide />
</swiper>

swiper配置

cardSwiperOption: {
  effect: 'coverflow',
  slidesPerView: 'auto',
  centeredSlides: true,
  coverflowEffect: {
    rotate: 0, // slide做3d旋转时Y轴的旋转角度
    stretch: -54, // 每个slide之间的拉伸值，越大slide靠得越紧。
    depth: 310, // slide的位置深度。值越大z轴距离越远，看起来越小。
    modifier: 1,
    slideShadows: false
  }
}