zoukankan      html  css  js  c++  java
  • 关于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,
    
        },
    
    });                                        
  • 相关阅读:
    loj6158 A+B Problem (扩展KMP)
    2017CodeM初赛B场
    Codeforces Round #421(div 2)
    CF821E(多次矩阵快速幂)
    Codechef-ANCESTOR(树套树/CDQ分治)
    Codechef-BLACKCOM(树形背包dp)
    Codechef-CHEFPRAD(找事件点+贪心)
    洛谷 p3391
    luogu p3369
    LOJ10082
  • 原文地址:https://www.cnblogs.com/maxiansheng/p/11289483.html
Copyright © 2011-2022 走看看