在线实例

默认 响应式 垂直 空间间隔 滚动 自动滚动
中心化 中心化自动 免费模式 多个滚动 水平滚动 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. 使用模板技术处理ASP.NET中GridView额外序号列的问题

    问题描述: 现在要在一张GridView表中添加一列来显示行号,要求是显示下一页的时候能够递增而不是从新编号.数据库中的没有相关序号列 如何在软件端实现呢? 通过测试,添加以下代码即可解决需求. &l ...

  2. 蓝牙4.0 BLE基础之vdd检测new

    外部ADC通道,我们现在用的是A0脚,也就是P00通道 把它设置成输出的一个模式.在程序中设置,代码如下: #include <ioCC2540.h> #define HAL_ADC_RE ...

  3. CSS技能汇总,研究及实践

    最近一直在研究CSS,因为发现实践中大部分时间都在写CSS,且自己感觉写的很烂,虽然以前看的很多,但却很少有去实践过,更别提研究了,现在发现根本就不是你懂你就会,很多都是你用着用着才真的会了的,于是现 ...

  4. 面向对象tab栏例子分析

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

  5. 再谈collections模块defaultdict()和namedtuple()

    defaultdict()和namedtuple()是collections模块里面2个很实用的扩展类型.一个继承自dict系统内置类型,一个继承自tuple系统内置类型.在扩展的同时都添加了额外的很 ...

  6. HTML内联元素

    前面的话 用于标记段落里的文本和其他内容组的元素种类很多,本文将这些文本级元素进行简单分类,便于整理和记忆 通用容器 <span>元素是短语内容的通用行内容器,并没有任何特殊语义.可以使用 ...

  7. [OpenCV] Samples 07: create_mask

    鼠标画线,圈地,构造相关mask图片(黑白). 支持鼠标左键右键中间键点击事件. /* * create_mask.cpp * * Author: * Siddharth Kherada <si ...

  8. 设置国内的centos 7 yum源

    本人在帝都,觉得首都在线(yun-idc.com)的yum源速度不错,故选它了.具体操作方法是将以下文件保存到 /etc/yum.repos.d/yun-idc.repo 即可. [base] nam ...

  9. [Node.js] 使用node-forge保障Javascript应用的传输安全

    原文地址:http://www.moye.me/2015/12/19/protect_jsapp_tsl_by_using_node-forge/ 引子 半年前的最后一次更新(惭愧  ),提到了对称与 ...

  10. modern.IE – Web 开发必备的 IE 浏览器测试工具

    modern.IE 是微软推出的一个开发人员中心,提供免费的工具和资源,旨在使您能够花更少的时间来测试各种版本的 Internet Explorer,并留出更多时间在现代 Web 上构建重要的内容.m ...