Swiper 3D flow輪播使用方法
阿新 • • 發佈：2017-11-30
移動 ref get idt dep enter nta 2.x 分享
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
Swiper 3D flow輪播使用方法