• Swiper 3D flow轮播使用方法


    swiper 的3d轮播效果,移动端适用

    (1). 如需使用Swiper的3d切换首先加载3D flow插件(jscss)。

    <head>
     <link
    rel="stylesheet"
    href="css/idangerous.swiper.css">
     <link
     rel="stylesheet"
    href="css/idangerous.swiper.3dflow.css">
     <script
    src="js/idangerous.swiper-2.x.min.js"></script>
     <script
     src="js/idangerous.swiper.3dflow-2.x.js"></script>
    </head>

    (2). 插入相应代码

    var mySwiper =new
     Swiper('.swiper-container',{
     //其他设置
     tdFlow:
     { 
     rotate :50,
     stretch :0,
     depth:100,
    modifier :1,
    shadows :true
    }
    });

    (3). 参数分析

    rotate :number,   //侧转角度(正值凹陷)、(负值凸出)
         stretch : number,  //每个slide之间拉伸值(正值紧贴)、(负值远离)
         depth :  number,   // 正值越大slide为远景图(可负值)
         modifier :  number,  //depth和rotate和stretch的倍率,值越大这三个参数的效果越明显
         shadows :  true     //是否使用阴影

     <script>
      var mySwiper = new Swiper('.swiper-container',{
            slidesPerView:  3,
            loop:  true,
    
            //Enable 3D Flow
            tdFlow: {}  //默认,凹陷,slide之间有间距
      })
      </script>

    <script>
      var  mySwiper = new Swiper('.swiper-container',{
             slidesPerView: 3,
             loop:true,
    
             //Enable 3D Flow
             tdFlow: {
                          rotate : 30,//侧转角度(正值凹陷)
                          stretch :10,//每个slide之间拉伸值(正值紧贴) 
                          depth: 150,  //值越大为远景(可负值)
                          modifier : 1,
                          shadows: true
           }
      })
      </script>

      <script>
       var  mySwiper = new Swiper('.swiper-container',{
              slidesPerView:3,
              loop:true,
    
     //Enable 3D Flow
              tdFlow: {
                           rotate : -30,//侧转角度(负值凸出)
                           stretch :0,
                           depth: 120,
                           modifier : 1,
                           shadows: true
               }
       })
       </script>

    <script>
       var mySwiper = new Swiper('.swiper-container',{
             slidesPerView:3,
             loop:true,
               
             //Enable 3D Flow
             tdFlow: {
                         rotate : 10,
                         stretch :-50,//每个slide之间拉伸值(负值远离) 
                         depth: 400,  //值越大图片越往后退(可负值)
                         modifier : 1,
                         shadows: true
             }
        })
        </script>

    Demo效果:

    http://2.swiper.com.cn/demo/3dflow/index.html

    详细参数:

    http://2.swiper.com.cn/api/3dflow/2015/0203/180.html
  • 相关阅读:
    Android周学习Step By Step(6)Android的数据库SQLite
    Android周学习Step By Step(2)HelloWorld
    解决方案(.sln)文件
    浅谈测试(1)单元测试
    批量上传功能的实现
    分页控件AspNetPager的用法
    .net下验证码的简单实现
    window.alert重写实现友好的对话框(支持IE)
    网页上自定义运行和测试HTML脚本
    数据库行转列的sql语句(zt)
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/7923280.html
Copyright © 2020-2023  润新知