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 :,
stretch :,
depth:,
modifier :,
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: ,
loop: true, //Enable 3D Flow
tdFlow: {} //默认，凹陷，slide之间有间距
})
</script>
<script>
var mySwiper = new Swiper('.swiper-container',{
slidesPerView: ,
loop:true, //Enable 3D Flow
tdFlow: {
rotate : ,//侧转角度（正值凹陷）
stretch :,//每个slide之间拉伸值（正值紧贴）
depth: , //值越大为远景（可负值）
modifier : ,
shadows: true
}
})
</script>
<script>
var mySwiper = new Swiper('.swiper-container',{
slidesPerView:,
loop:true, //Enable 3D Flow
tdFlow: {
rotate : -,//侧转角度（负值凸出）
stretch :,
depth: ,
modifier : ,
shadows: true
}
})
</script>
<script>
var mySwiper = new Swiper('.swiper-container',{
slidesPerView:,
loop:true, //Enable 3D Flow
tdFlow: {
rotate : ,
stretch :-,//每个slide之间拉伸值（负值远离）
depth: , //值越大图片越往后退（可负值）
modifier : ,
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轮播使用方法的更多相关文章
- 小程序实践（二）：swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- swiper如何实现轮播嵌套轮播
之所以要写这篇文章是因为插件有个bug,要改掉这个bug比较麻烦,所以就想了个折中的办法,绕过这个限制,方法千万条,功能干出来第一条,哈哈 最近做了个需求,效果图是这样的 第一个框是大轮播,第二个框是 ...
- 实现一个3D图片轮播插件 —— 更新版
前言: 前段时间写下了之前那篇 3D图片轮播效果,后来发现了 Pedro Botelho 写的jquery.gallery.js ,于是重新修改了自己的这个图片轮播,使之可以成为一个插件来使用 ...
- 带锁的3D切割轮播图
3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 使用swiper来实现轮播图
使用swiper来实现轮播图 swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好. 由于简单这里当然就不会去详细介绍了,推荐两个网址: 1.http://ww ...
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...
- 使用Swiper快速实现3D效果轮播
最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...
随机推荐
- 高三感想+跨年感想+OI回忆录
2017.12.29晚 高三感慨 与OI分别很久了,发现自己已经不会敲代码了…… 高三国庆前大概比较正常,只是某只人影响有点大(现在好多了)…… 感觉国庆以后状态就没好过. 先感冒两个星期,然后某个周 ...
- 某种密码(password.*)
关于某种密码有如下描述:某种密码的原文A是由N个数字组成,而密文B是一个长度为N的01数串,原文和密文的关联在于一个钥匙码KEY.若KEY=∑▒[Ai*Bi],则密文就是原文的一组合法密码.现在有原文 ...
- [bzoj1925][Sdoi2010]地精部落_递推_动态规划
地精部落 bzoj-1925 Sdoi-2010 题目大意:给你一个数n和模数p,求1~n的排列中满足每一个数的旁边两个数,要么一个是边界,要么都比它大,要么都比它小(波浪排列个数) 注释:$1\le ...
- [bzoj2599][IOI2011]Race_树上点分治
Race bzoj-2599 题目大意:询问一颗树上最短的.长度为k的链,边有边权,n个节点. 注释:$1\le n \le 2\cdot 10^5$,$1\le k \le 10^6$. 想法:树上 ...
- monitor cursor
客户提出了一个需求,他们改进了自己的程序,想证明程序现在open cursor变少了,也就是说程序运行过程中 open cursor的峰值变小了. 我写了一个脚本来进行这个监控. oracle[aaa ...
- vim快速操作
简明 VIM 练级攻略 vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn ...
- 最简单的基于FFmpeg的移动端样例：Windows Phone HelloWorld
===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...
- update_notifier 造成nodejs进程数量增长的问题
最近运维老大j哥找到我说了一个事儿:某私有化部署的线上环境nodejs进程数量多达1000+,对比公版线上环境的66个进程数显得十分诡异.并且单个nodejs进程所占用swap空间也较大,也不释放空间 ...
- effective C++ 读书笔记 条款11
条款11: 在operator= 中处理"自我赋值" 在实现operator=时考虑自我赋值是必要的就像 x=y .我们不知道变量x与y代表的值是否为同一个值(把x和y说成是一个指 ...
- luogu2577 [ZJOI2005] 午餐 贪心
题目大意 THU ACM小组的吃饭计划是这样的:先把所有的人分成两队,并安排好每队中各人的排列顺序,然后一号队伍到一号窗口去排队打饭,二号队伍到二号窗口去排队打饭.每个人打完饭后立刻开始吃,所有人都吃 ...