swiper堆叠图实现分析及参数解释_swiper卡片堆叠

此次实现是基于swiper 4.5.1

原理

首先我们是基于effect切换效果中的"coverflow"来实现，然后配合coverflowEffect里的一些参数设置，达到上述效果。

 参数解析

new Swiper('.swiper-container', {
        // 容器能够显示的slide数量，可以用来调节中间slide占比大小（为了达到设计图的尺寸），
        // slide不能固定宽度，会影响滑动效果，所以这里用比例调节
        slidesPerView: 1.509,
        // 当前active的slide居中-最前面的大图
        centeredSlides: true,
        // 切换效果
        effect: 'coverflow', 
        // 调节参数，慢慢调节，根据以下说明及自己容器的宽高达到想要的效果
        coverflowEffect: {
          rotate: 0,
          stretch: 460,
          depth: 400,
          modifier: 1.3,
          slideShadows: false,
        },
      })