關於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, }, });