Swiper 3D flow轮播使用方法
Posted haonanElva
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 } });
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轮播使用方法的主要内容，如果未能解决你的问题，请参考以下文章