在线实例

默认 响应式 垂直 空间间隔 滚动 自动滚动
中心化 中心化自动 免费模式 多个滚动 水平滚动 grab-cursor

使用方法

  1. <div class="swiper-container">
  2. <div class="swiper-wrapper">
  3. <div class="swiper-slide">Slide 1</div>
  4. <div class="swiper-slide">Slide 2</div>
  5. <div class="swiper-slide">Slide 3</div>
  6. <div class="swiper-slide">Slide 4</div>
  7. <div class="swiper-slide">Slide 5</div>
  8. <div class="swiper-slide">Slide 6</div>
  9. <div class="swiper-slide">Slide 7</div>
  10. <div class="swiper-slide">Slide 8</div>
  11. <div class="swiper-slide">Slide 9</div>
  12. <div class="swiper-slide">Slide 10</div>
  13. </div>
  14. </div>
复制
  1. var swiper = new Swiper('.swiper-container');
复制

手机端Swiper 触屏滑动的更多相关文章

  1. 仿今日头条app手机端顶部触屏滑动导航

    swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 手机端html5触屏事件(touch事件)

    touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...

  3. (转)手机端html5触屏事件(touch事件)

    本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时 ...

  4. 转:手机端html5触屏事件(touch事件)

    touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点( ...

  5. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 移动端 微信 网易 触屏滑动回弹菜单(css版)

    总结一下: 有点:网易新闻,微信 热文 都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧: bug: 部分安卓浏览器(uc,自带)  只支持持续滑动,不 ...

  7. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  8. 朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

    翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...

  9. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. Form的enctype="multipart/form-data"作用

    <form class="form-horizontal" role="form" method="post" action=&quo ...

  2. 使用BCP导出导入数据

    bcp 实用工具可以在 Microsoft SQL Server 实例和用户指定格式的数据文件间大容量复制数据. 使用 bcp 实用工具可以将大量新行导入 SQL Server 表,或将表数据导出到数 ...

  3. 移动端BUG汇总

    position:fixed问题 固定定位到底部会把最后一个元素盖住 你会发现最后一个字被盖住了,并且还滚动不下去. 解决方法: 给后一个元素添加一个高度,或者给body加margin-bottom ...

  4. @import导入外部样式表与link链入外部样式表的区别

    昨天碰到同事问了一个问题,@impor导入外部样式与link链入外部样式的优先级是怎样的,为什么实验的结果是按照样式表导入后的位置来决定优先级. 今天就这个问题,度娘上找了很久,终于有个总结性的答案出 ...

  5. maven+svn忽略提交到svn的文件

  6. Chrome 控制台指南

    转自:http://blog.jobbole.com/76985/ Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更 ...

  7. 单机redis 主从实例

    环境windows xp sp3 1.redis 安装 redis windows安装文件下载地址:http://code.google.com/p/servicestack/wiki/RedisWi ...

  8. HTML5移动Web开发(三)——在移动网站中使用HTML5

    创建一个简单得HTML5页面ch01e2.html <html> <head> <meta name="viewport" content=" ...

  9. webpack打包压缩工具的使用方法

    具体使用方法参考来源http://www.cnblogs.com/Leo_wl/p/4793722.html 必须注意的地方: 一.webpack在nodejs环境下运行 二,每个目录下都必须有一个w ...

  10. TCP/IP之四书五经[转自2003.12程序员]

    TCP/IP协议是当前广域网和局域网通用的网络协议,因此,基于TCP/IP的编程就格外重要.从应用上来说,现在直接利用C层次Socket API进行TCP/IP编程的人确实越来越少了,各种现成的框架( ...