基于vue2+swiper异形轮播的实现（开发记录）

1.移动端公众号项目首页实现轮播效果：

2.代码部分

//html部分

<div class="swiperBox columnSwiperBox">
     <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in list" :key="item.id">
               <img class="images" :src="item.Pic" alt="" />
         </div>
    </div>
</div>

//js部分

let swiper2 = new Swiper('.columnSwiperBox', {
                loop: false,
                observer: true,
                observeParents: true,
                effect: 'coverflow',
                slidesPerView: 'auto',
                centeredSlides: false,
                coverflowEffect: {
                    rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
                    stretch: -5, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
                    depth: 20, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
                    modifier: 5,
                    slideShadows: false, //开启slide阴影。默认 true。
                },
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false, //解决滑动后不能轮播的问题
                },
            })

//css部分

.columnSwiperBox {
        overflow: hidden;
        height: 240px;
        .swiper-slide {
            width: 85% !important;
            border-radius: 20px;
            overflow: hidden;
        }
        .images {
            width: 100%;
            height: 368px;
        }
    }