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