在线实例

默认 响应式 垂直 空间间隔 滚动 自动滚动
中心化 中心化自动 免费模式 多个滚动 水平滚动 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. 在Windows平台上安装Node.js及NPM模块管理

    1. 下载Node.js官方Windows版程序:http://nodejs.org/#download    从0.6.1开始,Node.js在Windows平台上提供了两种安装方式,一是.MSI安 ...

  2. PHP的学习--解析URL

    PHP中有两个方法可以用来解析URL,分别是parse_url和parse_str. parse_url 解析 URL,返回其组成部分 mixed parse_url ( string $url [, ...

  3. PHP将部分内容替换成星号

    在最近的项目中,会碰到到某人的手机号码隐藏中间几位,身份证号码只显示末尾4位的需求.当时一开始是网上搜索了一下,看到有人是用substr_replace这个函数来替换的,后面我也用了这个函数,但在用的 ...

  4. 【Android】[转] Android中Bitmap,byte[],Drawable相互转化

    一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...

  5. java设计模式学习(-)

    在我目前看来博客的作用就是笔记了,所谓的原创也仅仅是复制了别人的东西实践了一下,但为了学习记忆确实要记录下来.在这里感谢网络各处的资源,原谅我对资源的索取. 接下来每天开始学以则设计模式或者几天学一则 ...

  6. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  7. EF基本操作增、删、查、改、分页,join……等

    一.批量添加数据 static void Main(string[] args) { add(); add2(); Console.ReadKey(); } static void add() { D ...

  8. LeetCode - 51. N-Queens

    51. N-Queens Problem's Link ------------------------------------------------------------------------ ...

  9. C语言学习008:标准错误

    在上一节中的数据文件中(C语言学习007:重定向标准输入和输出),如果文件中的数据包含非法数据,如何让程序显示一条错误的提示消息呢?就需要用到标准错误 #include <stdio.h> ...

  10. ASP.NET MVC 学习之路由(URL Routing)

    在ASP.NET MVC中,一个URL请求是由对应的一个Controller中的Action来处理的,由URL Routing来告诉MVC如何定位到正确的Controller和Action. 默认路由 ...