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
时间： 2024-10-08 17:39:59