Swiper 3D flow轮播使用方法

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

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

<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

 

posted @ 2017-11-29 23:14  haonanElva  阅读(7876)  评论(0)  编辑  收藏  举报