在线实例

默认 响应式 垂直 空间间隔 滚动 自动滚动
中心化 中心化自动 免费模式 多个滚动 水平滚动 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. OpenCASCADE Application Framework Data Framework Services

    OpenCASCADE Application Framework Data Framework Services eryar@163.com 一.概述Overview OpenCASCADE的数据框 ...

  2. Android入门(三)Activity-生命周期与启动模式

    原文链接:http://www.orlion.ga/432/ 一.活动的生命周期 1.返回栈 Android中的活动是可以重叠的,我们每启动一个新的活动,就会覆盖在原活动之上,然后点击Back键会销毁 ...

  3. Spark入门实战系列--6.SparkSQL(上)--SparkSQL简介

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .SparkSQL的发展历程 1.1 Hive and Shark SparkSQL的前身是 ...

  4. javascript学习总结(二):DOM常用方法。

    1 获取元素节点 a document.getElementById(id),它返回一个对象.是Document对象特有的函数,它还有这些方法: b element.getElementsByTagN ...

  5. linux的计划

    我接触linux也有好几年了,至少有5年了.最近公司在搞内部培训,人人都可以报名培训别人.想到自己在linux浸淫多年,应该出来出一份力.一直以来想就linux写一个专题.今天刚好在做相关的ppt,借 ...

  6. Razor语法的一些特殊需求输出

    开发ASP.NET MVC,常会使用Razor来呈现内容.下面有几个特殊需求的输出,Insus.NET列出来让大家参考. 双@@输出只有一个. 在Razor的语法中,如果想输出html,它会有两种语法 ...

  7. <textarea>输入框提示文字

    背景 看了过时的资料,花费大把时间,不过也有收获,还是写写吧! 分析 有同学可能想到直接在<textarea>标签内输入帮助文字,但是这又有一个新问题--因为<textarea> ...

  8. CodeSnippet.info 开源说明 和 环境搭建 (第一版)

    Github开源声明 本网站的代码开源,开源的目的如下 技术分享 希望业内同行贡献代码 希望能够让网站更加安全 开源地址: CodeSnippet开源地址 关于代码贡献 任何人都可以贡献代码,一般在 ...

  9. 使用ASP.NET 4的自动启动特性,解决ASP.NET第一次访问速度慢问题

    些web应用在可以处理用户访问之前,需要装载很多的数据,或做一些花费很大的初始化处理.今天使用 ASP.NET 的开发人员经常使用应用的Global.asax 文件中的 “Application_St ...

  10. C#制作RDLC报表

    报表以前我只做过水晶报表,但是最近发现家里的VS上面居然没有水晶报表,发现水晶报表现在貌似已经不能完全免费的使用了,为了保险起见,就用了VS自带的RDLC报表,用完感觉其实也是够用的嘛~ 建立一RDL ...