swiper.js中文网:http://www.swiper.com.cn/

文档结构

swiper.jquery.js    是需要引用jquery.js 或者 zepto.js 时,只需直接引用该文件即可,减少加载。

swiper.animate.js  使用animate.js的动画效果,使用方法:http://www.swiper.com.cn/usage/animate/index.html

基本使用方法

具体操作:http://www.swiper.com.cn/usage/index.html

1. 写基本html标签结构,结构中使用swiper.js的className;

2.书写js时,可直接调用某功能,但是前提必须是具有该功能的html标签存在在页面中;

3.使用swiper.js的样式,需应用swiper.css

API swiper.js版本3.0+  

具体API:http://www.swiper.com.cn/api/start/2014/1218/140.html

1.初始化

var mySwiper = new Swiper('.swiper-contain',{
autoplay: , // 自动滑动
})

2. Basic (swiper一般选项)

主要包含:初始设置,滑动方向,速度,自动播放,视差效果,隐藏显示时的尺寸应用等。

3. Progress (进度)

标识silde的索引

4. Free Mode(free模式/抵抗反弹)

是否实现自动贴合,贴合期间的各个效果

5. Slide grid(网格分布)

properties 属性

移动端开发(四):swiper.js的更多相关文章

  1. 11-移动端开发教程-zepto.js入门教程

    Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...

  2. 移动端开发利器vConsole.js,app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  3. Swift3.0服务端开发(四) MySQL数据库的连接与操作

    本篇博客我们来聊聊MySQL数据库的连接与操作.如果你本地没有MySQL数据库的话,需要你先安装MySQL数据库.在Mac OS中使用brew包管理器进行MySQL的安装是及其方便的.安装MySQL的 ...

  4. Swift3.0服务端开发(五) 记事本的开发(iOS端+服务端)

    前边以及陆陆续续的介绍了使用Swift3.0开发的服务端应用程序的Perfect框架.本篇博客就做一个阶段性的总结,做一个完整的实例,其实这个实例在<Swift3.0服务端开发(一)>这篇 ...

  5. 大前端全栈CSS3移动端开发

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 本节课学习视频来源:https://ww ...

  6. 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  7. html+js(swiper.js)+css左右滑动切换页面效果,适配移动端

    demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...

  8. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

  9. 兼容pc端和移动端的轮播图插件 swiper.js

    swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...

随机推荐

  1. 柯南君:看大数据时代下的IT架构(2)消息队列之RabbitMQ-基础概念详细介绍

    一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...

  2. NOI2012 Day2

    NOI2012 Day2 迷失游乐园 题目描述:给出一个\(n\)个点的图,边数为\(n-1\)或\(n\).从某个点出发,每次等概率地随机选一个相连的并且没有经过过的点,直到不能走为止,问期望路径长 ...

  3. Android切换页面效果的实现一:WebView+ViewFlipper

    前言: 这两周在帮学校做一个新生入学用的“新里程”的项目,要做到页面切换阅读的效果,自己百度了下,找到普遍是使用WebView+ViewFlipper的实现方法,但这种方法不能满足我的要求,因为它很难 ...

  4. ora-01031:insufficient privileges 解决方案

    sqlplus /as sysdba 连补上,ora-01031的解决方法: (1)检查sqlnet.ora是否包含这句话:SQLNET.AUTHENTICATION_SERVICES=(NTS),没 ...

  5. JSON.parse()的异常怎么处理;

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Sequence operation(线段树区间多种操作)

    Sequence operation Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  7. ASP.NET导出EXCEl方法使用EXCEl对象

    导出功能必须使用  office中EXCEl对象,整个操作如同在操作EXCEl一样,建立EXCEl应用----建立工作簿---建立sheet表单页, 代码实现过程中,如果想对单元格实现一些操作,或者汇 ...

  8. 制作U盘启动盘(以CentOS6.3为例)

    借助UltraISO(软碟通),自己百度下载一个即可(同样适用于制作Windows启动盘). 选择文件→打开,选择ISO镜像所在目录,如下两幅图所示:

  9. iOS开发通过代码方式使用AutoLayout (NSLayoutConstraint + Masonry)

    iOS开发通过代码方式使用AutoLayout (NSLayoutConstraint + Masonry) 随着iPhone6/6+设备的上市,如何让手头上的APP适配多种机型多种屏幕尺寸变得尤为迫 ...

  10. Mybatis设置自增主键

    useGeneratedKeys="true" keyProperty="id" 方法1: <insert id="insert" p ...