简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件。支持环绕滑动、自由滑动、组滑动、自动播放、延迟加载、视差滑动、图片滑动。兼容IE10+, Android 4+, Safari for iOS 5+, Firefox 16+, Chrome 12+ 。

下载https://github.com/metafizzy/flickity/archive/master.zip

演示https://flickity.metafizzy.co/

调用

1.引入文件

  1. <link rel="stylesheet" href="flickity.min.css">
  2. <script src="flickity.pkgd.min.js"></script>

2.编写html

  1. <div class="carousel">
  2. <div class="carousel-cell"></div>
  3. <div class="carousel-cell"></div>
  4. <div class="carousel-cell"></div>
  5. </div>

3.js配置

  1. var flky = new Flickity( '.gallery', {
  2. // 选项,默认值列表
  3.  
  4. accessibility: true,
  5. // 启用键盘导航,按左右键
  6.  
  7. adaptiveHeight: false,
  8. // 将幻灯片/轮播高度设置为所选的幻灯片
  9.  
  10. autoPlay: false,
  11. // 跳转到下一个单元格
  12. // 如果为 true, 默认间隔3秒
  13. // 或以毫秒为单位设置间隔时间
  14. // 例如 `autoPlay: 1000` 间隔为1秒
  15.  
  16. cellAlign: 'center',
  17. // 对齐,“中心”,“左”或“右”
  18. // 或小数点0-1,0是容器的开始(左),1是结束(右)
  19.  
  20. cellSelector: undefined,
  21. // 指定单元格元素的选择器
  22.  
  23. contain: false,
  24. // 将包含单元格到容器
  25. // 所以在开始或结束时没有多余的滚动
  26. // 如果启用了 wrapAround ,则不起作用
  27.  
  28. draggable: true,
  29. // 启用拖动和触摸
  30.  
  31. dragThreshold: ,
  32. // 用户必须水平滚动才能开始拖动的像素数
  33. // 增加触摸设备的垂直滚动空间
  34.  
  35. freeScroll: false,
  36. // 使内容可以自由滚动和弹出
  37. // 不调整单元格
  38.  
  39. friction: 0.2,
  40. // 较小的数字=更容易滑动
  41.  
  42. groupCells: false,
  43. // 将组包含在幻灯片中
  44.  
  45. initialIndex: ,
  46. // 初始选定单元的基于0的索引
  47.  
  48. lazyLoad: true,
  49. // 启用延迟加载图像
  50. // 设置图像 data-flickity-lazyload="src.jpg"
  51. // 设置为加载相邻单元格的图像
  52.  
  53. percentPosition: true,
  54. // 以百分比值而不是像素设置定位
  55. // 如果项目具有百分比宽度,则启用
  56. // 如果项目具有像素宽度(如图像)则禁用
  57.  
  58. prevNextButtons: true,
  59. // 创建并启用按钮以点击上一个和下一个单元格
  60.  
  61. pageDots: true,
  62. // 创建并启用页面点
  63.  
  64. resize: true,
  65. // 监听窗口调整大小事件,以调整大小和位置
  66.  
  67. rightToLeft: false,
  68. // 实现从右到左的布局
  69.  
  70. setGallerySize: true,
  71. // 设置画廊的高度
  72. // 如果图库已经使用CSS设置了高度,则禁用它
  73.  
  74. watchCSS: false,
  75. // 观看内容:之后的元素
  76. // 如果激活 #element:after { content: 'flickity' }
  77.  
  78. wrapAround: false
  79. // 在滑动结束时,首先使用无限滚动
  80.  
  81. });

4.样式

  1. .carousel-cell {
  2. width: %; /* full width */
  3. height: 160px; /* height of carousel */
  4. margin-right: 10px;
  5. }

更多样式见:https://flickity.metafizzy.co/style.html

flickity:支持触摸滑动,响应迅速的幻灯片轮播插件的更多相关文章

  1. Unslider – 轻量的响应式 jQuery 内容轮播插件

    Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...

  2. cssSlidy.js 响应式手机图片轮播

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"& ...

  3. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  4. 面板支持单个,多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  5. 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  6. 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  7. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  8. Swiper 轮播插件 之 动态加载无法滑动

    1.原因:轮播图未完全动态加载完成,即初始化 2.方法一:ajax链式编程 $.ajax({ type: "get", url: serviceURL + "/listB ...

  9. 关于Layui 响应式移动端轮播图的问题

    用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...

随机推荐

  1. ChIP-seq | ATAC-seq | 数据分析流程

    思来想去,还是觉得ENCODE的流程靠谱,所以又花了快一周来调试,终于排除万难,跑成功了.[2019年12月08日] 以下是ATAC生成的结果目录: call-align call-call_peak ...

  2. mysql注入写文件

    select * from admin where id =-1 union select 1,'<?php phpinfo();?>',3,4 into outfile 'c:\\1.p ...

  3. PHP系列 | Thinkphp3.2 上传七牛 bad token 问题 [ layui.upload 图片/文件上传]

    前端代码 <div class="logo_out" id="upload-logo"></div> JS代码 /** * 上传图片 * ...

  4. 手动计算UTXO

    const TX_TYPE_IN = 1; const TX_TYPE_OUT = 2; export const CreateUtxos = async (address: string, data ...

  5. Java: Java终止线程的几种方式

    首先说明,使用stop方法终止的方式已经在很久之前就被废弃了,在加锁的情况下有可能会造成死锁,这里不做讨论. 1. 使用标志位终止线程 在run()方法执行完毕后,该线程就终止了.但是在某些特殊的情况 ...

  6. 多线程--同步--方法块和同步块synchronized

    package com.sxt.syn; /** * 线程安全: 在并发时保证数据的正确性.效率尽可能高 * synchronized * 1.同步方法 * 2.同步块 * * */ public c ...

  7. 荔枝派nano例子

    买回来,先短接flash芯片的14脚,然后上电,再断开14脚,开始怎么折腾都不行,最后发现是android线的问题,换成jlink ob送的android线就能找到设备了,真崩溃 lsusb,应该能看 ...

  8. JAVA中String空对象的字符串拼接

    今天使用JSONObject中get一个不存在的对线,最后拼接成sql语句插入数据库时,最后数据库中的值为字符串'null',而不是空对象. 追踪许久才发现自己的java白学了. java strin ...

  9. 【SpringBoot】SpringBoot配置文件及YAML简介(三)

    SpringBoot配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的; application.properties application.yml 配置文件的作用:修改Spr ...

  10. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器软件正式环境安装部署攻略

    背景介绍 EasyDSS流媒体服务器软件,提供一站式的转码.点播.直播.时移回放服务,极大地简化了开发和集成的工作.其中,点播功能主要包含:上传.转码.分发.直播功能,主要包含:直播.录像, 直播支持 ...