flickity：支持触摸滑动，响应迅速的幻灯片轮播插件

2021-05-19 11:06:55 阅读：248 来源： 互联网

简介：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.引入文件

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

2.编写html

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

3.js配置

var flky = new Flickity( '.gallery', {
  // 选项，默认值列表

  accessibility: true,
  // 启用键盘导航，按左右键

  adaptiveHeight: false,
  // 将幻灯片/轮播高度设置为所选的幻灯片

  autoPlay: false,
  // 跳转到下一个单元格
  // 如果为 true, 默认间隔3秒
  // 或以毫秒为单位设置间隔时间
  // 例如 `autoPlay: 1000` 间隔为1秒

  cellAlign: 'center',
  // 对齐，“中心”，“左”或“右”
  // 或小数点0-1,0是容器的开始（左），1是结束（右）

  cellSelector: undefined,
  // 指定单元格元素的选择器

  contain: false,
  // 将包含单元格到容器
  // 所以在开始或结束时没有多余的滚动
  // 如果启用了 wrapAround ，则不起作用

  draggable: true,
  // 启用拖动和触摸

  dragThreshold: 3,
  // 用户必须水平滚动才能开始拖动的像素数
  // 增加触摸设备的垂直滚动空间

  freeScroll: false,
  // 使内容可以自由滚动和弹出
  // 不调整单元格

  friction: 0.2,
  // 较小的数字=更容易滑动

  groupCells: false,
  // 将组包含在幻灯片中

  initialIndex: 0,
  // 初始选定单元的基于0的索引

  lazyLoad: true,
  // 启用延迟加载图像
  // 设置图像 data-flickity-lazyload="src.jpg"
  // 设置为加载相邻单元格的图像

  percentPosition: true,
  // 以百分比值而不是像素设置定位
  // 如果项目具有百分比宽度，则启用
  // 如果项目具有像素宽度（如图像）则禁用

  prevNextButtons: true,
  // 创建并启用按钮以点击上一个和下一个单元格

  pageDots: true,
  // 创建并启用页面点

  resize: true,
  // 监听窗口调整大小事件，以调整大小和位置

  rightToLeft: false,
  // 实现从右到左的布局

  setGallerySize: true,
  // 设置画廊的高度
  // 如果图库已经使用CSS设置了高度，则禁用它

  watchCSS: false,
  // 观看内容：之后的元素
  // 如果激活 #element:after { content: 'flickity' }

  wrapAround: false
  // 在滑动结束时，首先使用无限滚动

});

4.样式

.carousel-cell {
  width: 100%; /* full width */
  height: 160px; /* height of carousel */
  margin-right: 10px;
}

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

标签：插件,flickity,false,轮播,启用,单元格,滑动,true
来源： https://blog.51cto.com/u_7034817/2785573

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

flickity：支持触摸滑动，响应迅速的幻灯片轮播插件