关于swiper 4的coverflowEffect（3d）

轮播效果：

 

 

HTML:

 

 <div class="swiper-container successful_swiper">
      <div class="swiper-wrapper">
           <div class="swiper-slide">
                <img src="./images/mallPlatform/Choice_img1.jpg" alt="">
           </div>
           <div class="swiper-slide">
                 <img src="./images/mallPlatform/Choice_img2.jpg" alt="">
           </div>
           <div class="swiper-slide">
                 <img src="./images/mallPlatform/Choice_img3.jpg" alt="">
           </div>
      </div>
  </div>
  <div class="pagination successful_pagination"></div>

JS:

 

new Swiper('.successful_swiper', {

    autoplay: {

        disableOnInteraction: false, // 鼠标滑动后继续自动播放
 delay: 4000, //4秒切换一次  }, speed: 1000, //切换过渡速度  effect: 'coverflow', loop: true, slidesPerView: "auto", centeredSlides: true, //设置slide居中 // spaceBetween: 10,  coverflowEffect: { rotate: 0, //slide作3d旋转时Y轴的旋转角度。默认50。  stretch: -30, //每一个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。  depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。  modifier: 1, //depth和rotate和stretch的倍率，至关于 depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。  slideShadows: false //开启slide阴影。默认 true。  }, pagination: { el: '.successful_pagination', clickable: true, }, });