jQuery flickity 滑动触屏

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

下载

时间: 2024-10-22 21:13:10

jQuery flickity 滑动触屏的相关文章

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

移动端touch触屏滑动事件.滑动触屏事件监听! 一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小

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

前言 TouchSlide 可以说是 SuperSlide 手机简化版,不同的地方在于:1.TouchSlide是纯javascript开发的,不依赖任何js库,鉴于此,TouchSlide调用方法和SuperSlide有点不同.调用方法为:TouchSlide({slideCell:"#slider",effect:"leftLoop"});(slideCell必须为id对象);同样效果,SuperSlide调用方法为:jQuery("#slider&q

常用的jquery触屏手机页面特效代码下载

js手机幻灯片代码制作手指滑动手机端图片轮播代码 jQuery移动端页面侧边导航菜单滑出效果代码 jquery.touchswipe.js手机端网页制作触屏滑动导航显示代码 jquery响应式幻灯片插件制作图片弹出手机幻灯片代码 jquery mobiscroll手机日期控件制作手机端日期控件 js手指滑动手机端列表加载动画效果 jquery手机导航菜单仿微信底部菜单代码 jquery html5手机触屏版点击弹出层对话框响应式网页布局代码 js手机端带进度条图片展示触屏滑动效果 jquery

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

JS代码(jquery.showup.js): /** * @Creator: Nelson Kuang/Fast Mover * @showup 翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页 * @License:The MIT License (MIT) * @调用方式 $("#container").showup({ startPage: 0,//开始页面 duration:1000//动画持续时间 }) * @Creator: Nelson Kua

jquery 触屏滑动+定时滚动

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="applicable-device

jQuery手机触屏左右滑动切换栏目和焦点图

实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide,大家可以百度下. 首先来看看左右滑动切换焦点图: JQuery代码 $(function(){ TouchSlide({ slideCell:"#slideBox", titCell:".myhd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层 mainCell:".bd ul", effect:"leftLoop

jquery触屏幻灯片

qq群号(html5技术交流):158677025   手机端演示二维码(或直接在手机中输入网址:http://lilinfeng.cncoder.me 浏览效果): 一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索了一翻,但最终都没有找到合适的,因此就觉得自己写一个了.下面的例子是我在已前的项目里摘出来的,对于触屏本人也不算老鸟,有写的不足的地

支持触屏的jQuery轮播图插件

移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫.不过功能上简单点,只实现支持触屏和无缝轮播. 1.页面代码 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"> 3 <head> 4 <meta charset="U

TouchSlide触屏滑动特效插件的使用

官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.插件开源.体积小.简单实用.功能强大,是你架构移动终端网站的重要选择!ps:如果你SuperSlide的使用者,那么你会发现它是那么熟悉和易用.v1.1 宽度自适应(修复安卓横屏时滑动范围不变的bug) 演示案例:http://www.supersli