Swiper 3D flow使用方法

来源：互联网发布：unity寻路算法编辑：程序博客网时间：2024/05/02 19:15

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

<head>

<linkrel="stylesheet"href="css/idangerous.swiper.css">

<link rel="stylesheet"href="css/idangerous.swiper.3dflow.css">

<scriptsrc="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 //是否使用阴影

//Enable 3D Flow
tdFlow: {} //默认，凹陷，slide之间有间距
})
</script>

//Enable 3D Flow
tdFlow: {
rotate : 30,//侧转角度（正值凹陷）
stretch :10,//每个slide之间拉伸值（正值紧贴）
depth: 150, //值越大为远景（可负值）
modifier : 1,
shadows: true
}
})
</script>

//Enable 3D Flow

tdFlow: {
rotate : -30,//侧转角度（负值凸出）
stretch :0,
depth: 120,
modifier : 1,
shadows: true
}
})
</script>

//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

0 0