码迷,mamicode.com
首页 > 其他好文 > 详细

Swiper 学习心得

时间:2015-07-03 15:28:14      阅读:1709      评论:0      收藏:0      [点我收藏+]

标签:

   swiper的结构为:

技术分享

技术分享

参数解析技术分享
1.direction:滑动方向 默认为horizontal(水平),可以设置为vertical(垂直,但在某些浏览器不好使)。
2.speed:从滑动开始到滑动结束的时间,注意autoplay指的是间隔多久开始滑动。
3.autoplay:如果用户操作后autoplay停止,参考基本选项 autoplayDisableOnInteraction
4.autoplayDisableOnInteraction:用户操作swiper之后,是否禁止autoplay。默认为true:停止。
5.grabCursor:设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同)。
6.parallax:滑动与其父元素之间的移动距离的关系。
7.ally:加提示信息。
8.width、height:会使自适应失效。
 
freeMode:(freemode/反弹模式)
1.freeMode:滑动不会按照块滑,根据滑动的力度而改变位置。
2.freeModeMomentum:会出现类似卡了的效果。
3.freeModeMomentumRatio:free模式动量值(移动惯量)。设置的值越大,当释放slide时的滑动距离越大。
 
Slides grid(网格分布)
用于设定slider块居中(centeredSlides),或者几块为一组(slidesPerGroup),各个Slide之间的距离(spaceBetween),多行布局里的Slide的数量(slidesPerColumn),多行布局以什么形式填充(slidesPerColumnFill)
 
Effects(切换效果)
effect:slide的切换效果,可以设置为fade(淡入),cube(方块),coverflow(3d流)
 
Clicks(点击)
swiping时点击出现各种阻止情况
 
Touches(触发swip的条件)
1.touchRatio 触摸距离与实际滑动的关系。
2.onlyExternal:值为true时,slide无法拖动,只能使用扩展API函数例如slideNext() slidePrev()slideTo()等改变slides滑动。
3.followFinger:如设置为false,拖动slide时它不会动,当你释放时slide才会切换。
4.设置为false时,进行快速短距离的拖动无法触发Swiper。
5.threshold:拖动的临界值(单位为px),如果触摸距离小于该值滑块不会被拖动。
 
...
 
Swiping/No swiping(禁止切换)
可以设置禁止滑动到下一个(前一个),或者设定滑动的区域。
 
* pagination 分页器
paginationClickable、 paginationBulletRender(设置索引)、paginationHide
 
* Navigation Buttons(前进后退按钮)
nextButtom  PrevButtom
 
* Scollbar(滚动条)
scrollbarHide
 
keyboard/mousewheel(鼠标、键盘控制选项)
 
Callbacks(回调函数)

 

Swiper 学习心得

标签:

原文地址:http://www.cnblogs.com/vvy-404/p/4618521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!