Swiper 学习心得

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(回调函数)

时间: 2024-07-29 14:34:34

Swiper 学习心得的相关文章

Linux系统理解以及Linux系统学习心得

原创作品转载请注明出处  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 作者:严哲璟 说一下我对Linux系统的理解 1.加载Linux内核准备:在加载基本输入输出模块(BIOS)之后,从磁盘的引导扇区读入操作系统的代码文件块到内存中,之后开始整个系统的初始化. 2.main.c的start_kernel函数是整个操作系统的入口,这也与Linux是基于C语言的特性相符,start_kernel具体做的动作很多

我的MYSQL学习心得(八)

我的MYSQL学习心得(八) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL学习心得(五) 我的MYSQL学习心得(六) 我的MYSQL学习心得(七) 这一篇<我的MYSQL学习心得(七)>将会讲解MYSQL的插入.更新和删除语句 同样的,只会讲解跟SQLSERVER不同的地方 插入 将多行查询结果插入到表中 语法 INSERT INTO table_name1(column_list1) SELECT (

我的MYSQL学习心得(一)

我的MYSQL学习心得(一) 使用MYSQL有一段时间了,由于公司使用SQLSERVER和MYSQL,而且服务器数量和数据库数量都比较多 管理起来比较吃力,在学习MYSQL期间我一直跟SQLSERVER进行对比 第一期主要是学习MYSQL的基本语法,陆续还有第二.第三.第四期,大家敬请期待o(∩_∩)o 语法的差异 我这里主要说语法的不同 1.默认约束 区别:mysql里面DEFAULT关键字后面是不用加括号的 --sqlserver CREATE TABLE emp ( id INT DEFA

在马哥linux运维学院学习心得

题目:在马哥linux运维学院学习心得 姓名:谭龙 班级:M18 学号:26 时间:2016-02-29--2016-06-02(正常毕业时间预计在7月中上旬)   正文: 个人基本情况: 我是一名在校的即将毕业的大四学生,毕业时间为2016.7.专业为矿物加工工程专业,纯正的四川-广安人(邓小平故居就在那).因找不到工作,加上自己也不知道干什么,在堂弟的推荐下,来参加了马哥linux运维学院的学习:怀揣着一颗对计算机懵懂的心,开始涉足从未接触过了linux. 个人收获与心理变化: 在一开始接触

第一篇大数据学习心得

之前未习惯发布学习心德博文,后续会采用这种方式发布学习心得,希望能够很好的督促自己. 计划会按scala,Hadoop,Spark的顺序去学习. 刚学scala的时候,眼前一亮,这语法跟python,java很像啊,刚好两者很熟悉,偷笑,后面果然学的得心应手.今天就不发表具体的技术内容.反正王学林老师的视屏讲解很好,声音非常富有感染力,想开小差都比较难,呵呵,话语精炼,个人较喜欢的风格,这里说下这段时间学习scala的小心得?,视频学完一章紧接着进行敲代码,调试,最后记笔记,对,记笔记,不一定是

spring核心知识(学习心得)

直接进入主题,主要分为两大部分:框架学习心得和spring框架的核心知识. 学习心得 1.学习框架的时候,一定要弄清楚的几个问题: a. 这是一个什么框架 轻量级还是重量级, 侵入式还是非侵入式,是解决单个问题还是整体的解决方案. b. 框架的设计理念是什么(为了解决什么问题而出现) c. 框架的优缺点 d. 框架的架构是怎样的 e. 框架的核心是什么 f. 框架能实现哪些功能 在学习一个框架的时候如果都不知道它能够提供哪些功能,就更加不用谈功能实现和充分利用框架了 2. 在学习多个框架以后,如

C++用法的学习心得

c++这门课,在我刚进入大学的就已经开始接触了.因为自己的专业就是计算机科学,因此c++嘛,对于我来说还是比较重要的.不同于其他专业,一开始我接触就是c++了,跳过了c语言一类的课.就我自己认为,c++这课学起来还是很有难度的.大一上课的时候,老师就说过这课在生活中的应用很广泛.处于初学者的我,开始给我的感觉就是很是乏味枯燥,提不起兴趣.不过仔细想想自己的专业就是和它有关,就算将来自己不从事这个行业,还是很有学习它的必要.因为多一门技术总归是不会吃亏的. 作为男生嘛,自己没有少玩游戏.很多人玩游

Android学习心得(16) --- Dex文件结构实例解析(2)

我在博客上发表一些我的Android学习心得,希望对大家能有帮助. 这一篇我们讲述一下通过一个实例来分析dex文件结构和组成. 参考Leb128数据类型 Android学习心得(5) --- dex数据类型LEB128 参考实例分析学习理解dex文件结构Android学习心得(15) --- Dex文件结构解析(1) 参考baksmali工具使用Android学习心得(4) --- MAC下smali文件编写与运行 1.编译 我们通过一个例子来分析dex文件的构成 创建一个Hello.java文

Android Window PhoneWindow Activity学习心得--第三弹

Android Window  PhoneWindow Activity学习心得--第三弹 前面 我们完成了从Activity到PhoneWindow的整体跨度 正如我们所知道的与Activity组件关联的一个应用程序窗口视图对象关联一个ViewRoot对象,而将 一个Activity组件的应用程序窗口视图对象与一个ViewRoot对象关联是通过该Activity组件所使用的 窗口管理器(WindowManager)来执行的. 在我们初始化DecorView完成之后,我们需要关联应用程序窗口视图