metafizzy/flickity

项目介绍

Flickity 是一个 JavaScript 轮播图库，用来在网页中制作支持触摸拖动、滑动和自动吸附的轮播图与画廊。它内置了拖拽与惯性滑动、上一页/下一页按钮、分页圆点、自动播放、图片懒加载、RTL 布局等能力 (1)(2)。

它面向需要灵活轮播组件的前端开发者，不绑定具体框架。使用时只需要一个容器元素和若干子单元，再通过 JavaScript 初始化即可 (22)(23)。

快速使用

从 unpkg 引入 CSS 和 JavaScript，可以直接下载文件或使用链接 (6)(11)：

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

也可以通过 npm 或 Bower 安装 (15)：

npm install flickity --save

准备一个包含子单元的容器，然后初始化 Flickity (23)(24)：

<div class="carousel">
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
</div>

var flky = new Flickity('.carousel', {
  cellAlign: 'center',
  wrapAround: true
});

初始化后即可拖动和滑动轮播，第二个参数支持 autoPlay、cellAlign、prevNextButtons、pageDots 等选项 (24)。

使用约束

• 开源应用需遵循 GPLv3；用于商业网站、主题、项目和应用时需要购买商业许可证 (17)(19)(21)。
• README 列出了 accessibility、lazyLoad 等选项，但完整的 API、演示和集成说明放在项目官网，没有全部写进 README (2)。
• 图片懒加载使用 data-flickity-lazyload 属性；percentPosition 等布局选项要根据子单元使用百分比宽度还是像素宽度来设置 (24)。

HotRepo 点评

该仓库没有可用的 HotRepo 榜单快照、Star 曲线或讨论记录，站内没有可依据的热度趋势。可以确认的事实是：项目创建于 2014 年，通过 unpkg 分发，文档独立放在官网，适合需要轮播图库并能接受其双许可证模式的开发者使用。