flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式、循环滚动、自动播放、是否支持拖动、是否开启分页、是否自适应窗口等。

在线实例

实例演示

使用方法

  1. <div class="hero-gallery js-flickity">
  2. <div class="hero-gallery__cell hero-gallery__cell--1">
  3. <div class="content-wrap">
  4. <h1>flickity滑动插件</h1>
  5. <p class="tagline">触屏,响应,可锁定的画廊</p>
  6. </div>
  7. </div>
  8. <div class="hero-gallery__cell hero-gallery__cell--2">
  9. <div class="content-wrap">
  10. <p class="slogan slogan--easy">使用简单</p>
  11. <p class="slogan slogan--fun">有趣的flickity滑动插件.</p>
  12. <p class="slogan slogan--tagline">Flickity使画廊有触屏滑动、旋转木马的感觉。</p>
  13. </div>
  14. </div>
  15. <div class="hero-gallery__cell hero-gallery__cell--3">
  16. <div class="content-wrap">
  17. <ul class="feature-list">
  18. <li>有动画效果</li>
  19. <li>支持触屏滑动</li>
  20. <li>响应式风格</li>
  21. <li>丰富的API</li>
  22. </ul>
  23. </div>
  24. </div>
  25. </div>
复制

参数详解

参数 描述 默认值
cellAlign 对齐方式 可选参数: 'center', 'left', 'right' center
wrapAround 循环滚动 可选参数: true, false false
contain 控制按钮 自定义控制按钮从开始或结束滚动,若在 wrapAround: true无效. false
autoPlay 自动播放 false
draggable 是否支持拖动 true
cellSelector 目标容器 undefined
pageDots 是否开启分页 true
prevNextButtons 是否显示上下页按钮 true
resizeBound 是否自适应窗口 true

jQuery flickity 滑动触屏的更多相关文章

  1. (转)js的左右滑动触屏事件

    原文:http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html (2012-01-20 08:55:53) 转载▼ 标签: 移动设备 触屏事件 杂谈 分 ...

  2. 移动端touch触屏滑动事件、滑动触屏事件监听!

    一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...

  3. 黄聪:手机移动端建站Jquery+CSS3+HTML5触屏滑动特效插件、实现触屏焦点图、图片轮展图

    前言 TouchSlide 可以说是 SuperSlide 手机简化版,不同的地方在于:1.TouchSlide是纯javascript开发的,不依赖任何js库,鉴于此,TouchSlide调用方法和 ...

  4. js触屏事件

    js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend.这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标. touchstart在触摸开始 ...

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

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

  6. jquery 触屏滑动+定时滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  8. Bootstrap幻灯轮播如何支持触屏左右滑动手势?

    最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...

  9. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

随机推荐

  1. Mono 3.8发布:性能进一步改进,可伸缩性提升

    9月4日,Mono 3.8.0发布了.该版本的运行时带来了一些性能和可伸缩性方面的改进,同时完成了向Windows平台的移植. Mono遵循Gnome和Linux内核的版本编号策略,这意味着3.8是3 ...

  2. CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator

    CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator 我还没有用过Compute Shader,所以现在把红宝书里的例子拿来了,加入CSharpGL中. ...

  3. Javascript之变量作用域

    分析: 无论是强类型语言c#.c++.java等语言,还是弱类型语言如Javascript,所有变量可以抽象为两种类型,即局部变量和全局变量. 全局变量:整个作用域可见. 局部变量:局部可见,退出作用 ...

  4. 修改Coney主题之侧边栏移位

    title: 修改Coney主题之侧边栏移位 date: 2014-12-15 18:09:54 categories: Hexo tags: [hexo,css] --- Coney是一个非常漂亮的 ...

  5. Javascript的“上下文”(context)

    一:JavaScript中的“上下文“指的是什么 百科中这样定义: 上下文是从英文context翻译过来,指的是一种环境. 在软件工程中,上下文是一种属性的有序序列,它们为驻留在环境内的对象定义环境. ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统(49)-工作流设计-我的申请

    系列目录 提交一个表单后 我们需要一个管理的列表.我的申请,我的申请包含了提交内容的列表状态 状态分:过期,未审核,审核通过,驳回,废弃 列表对应代码 @using App.Admin; @using ...

  7. 软件工程的引入:Scrum开发框架总结

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及的知识点如下: 软件工程概念 敏捷开发过程scrum 一.什么是软件工程?请用一句话描述. 软件工程是一门研究性的学科:它用工程化 ...

  8. PL/sql使用总结

    ①右键表拖入到sql窗口中,可自动生成脚本: ②可以和Excel直接复制粘贴: ③F5查看执行计划: ④有环境变量则用环境变量,否则就会去注册表中找对应的值 ⑤oracle客户端设置编码只是为了告诉数 ...

  9. C#索引器

    索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不同的是索引器的访问是带参的. 索引器和数组比较: (1)索引器的索引值(Index)类型不受限制 (2)索引器允许重载 ...

  10. python中的str,unicode和gb2312

    实例1: v1=u '好神奇的问题!?' type(v1)->unicode v1.decode("utf-8")# not work,because v1 is unico ...