在线实例

默认 响应式 垂直 空间间隔 滚动 自动滚动
中心化 中心化自动 免费模式 多个滚动 水平滚动 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. C# yeild使用

    C# yeild的两种形式的yield语句: yield return <expression>; yield break; 使用 yield return 语句每一次返回每个元素. 将使 ...

  2. 让div垂直以及水平居中浏览器窗口

    首们需要position:absolute;绝对定位,或者position:fixed.而层的定位点,使用外补丁margin负值的方法.负值的大小为层自身宽度高度除以二. 如:一个层宽度是400,高度 ...

  3. 机器学习&数据挖掘笔记_21(PGM练习五:图模型的近似推理)

    前言: 这次练习完成的是图模型的近似推理,参考的内容是coursera课程:Probabilistic Graphical Models . 上次实验PGM练习四:图模型的精确推理 中介绍的是图模型的 ...

  4. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  5. JavaScript中,提取子字符串方法:Slice、Substring、Substr的比较。

    在JavaScript中,提取子字符串主要是通过 Slice.Substring.Substr 三个方法之一. // slice // 语法: string.slice(beginSlice [, e ...

  6. Azure China (3) 使用Visual Studio 2013证书发布Cloud Service至Azure China

    <Windows Azure Platform 系列文章目录> 之前有很多网友询问我如何通过VS发布Cloud Service至Azure China,这里我专门写篇文章,给大家详细介绍下 ...

  7. Windows Azure Cloud Service (39) 如何将现有Web应用迁移到Azure PaaS平台

    <Windows Azure Platform 系列文章目录> 本文将简单介绍,如何将企业内现有的ASP.NET应用程序迁移到Azure PaaS平台. 因为在迁移过程中,可能需要对现有的 ...

  8. java类的初始化和对象的创建顺序

    学习java编程思想--类的初始化p146 类的加载顺序* 1加载器启动找到 xxx.class文件,通过extends关键字寻找基类,先加载基类* 2类初始化先初始化static成员变量和stati ...

  9. JS魔法堂:函数节流(throttle)与函数去抖(debounce)

    一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...

  10. 【Swift学习】Swift编程之旅---字符与字符串(五)

    String是swift的字符串类型.一个字符串是一个有效的字符序列,因此还可以使字符集合表示.通过+符号可以连接字符串. String 类型是一种快速.现代化的字符串实现.每一个字符串都是由独立编码 ...