今天为大家分享一款用于创建响应式轮播图的JS插件–Flickity，该插件不仅支持PC端还支持移动端触摸屏并有多种表现方式。

快速使用

1. 下载2个文件 flickity.css，flickity.pkgd.min.js

2. 把Flickity的.css和.js 文件添加到页面中，如下：

   [html]<link rel="stylesheet" href="/path/to/flickity.css" media="screen">
   [/html]

   [html]<script src="/path/to/flickity.pkgd.min.js"></script>
   [/html]

3. 增加js-flickity class到对象.

[html]<div class="gallery js-flickity">
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
…
</div>
[/html]

下载

• CSS:
  • flickity.css un-minified, or
  • flickity.min.css minified
• JavaScript:
  • flickity.pkgd.js un-minified, or
  • flickity.pkgd.min.js minified

CDN

[html]<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.2/flickity.css">
<!– or –>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.2/flickity.min.css">
[/html]

[html]<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.2/flickity.pkgd.js"></script>
<!– or –>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.2/flickity.pkgd.min.js"></script>
[/html]

调用方法

第一种：

类似jQuery的方法: $('selector').flickity().

[js]$(‘.main-gallery’).flickity({
// options
cellAlign: ‘left’,
contain: true
});
[/js]

第二种：
Vanilla JavaScript的方法：

[js]var elem = document.querySelector(‘.main-gallery’);
var flkty = new Flickity( elem, {
// options
cellAlign: ‘left’,
contain: true
});

// element argument can be a selector string
// for an individual element
var flkty = new Flickity( ‘.main-gallery’, {
// options
});
[/js]

第三种：
你同样可以在HTML中就可以调用Flickity，无需编写任何JavaScript。

[html]<div class="main-gallery js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true }’>
[/html]

功能选项

wrapAround

循环从一端滑向另一端

freeScroll

内容可以自由滚动，在末端没有内容时，便不能滚动。

通过设置freeScroll和contain，可以变为一个简单的水平滚动。

autoPlay

自动播放，鼠标悬停或点击时，停止播放，鼠标离开继续自动播放。

Images

纯图片轮播。
[html]<div class="gallery js-flickity" data-flickity-options='{ "imagesLoaded": true, "percentPosition": false }’>
<img src="orange-tree.jpg" alt="orange tree" />
<img src="submerged.jpg" alt="submerged" />
<img src="look-out.jpg" alt="look-out" />
…
</div>
[/html]

在CodePen上编辑此Demo

imagesLoaded

如果图片没有大小，则会脱离容器位置。使用imagesLoaded就可以解决这个问题

[js]imagesLoaded: true[/js]

在CodePen上编辑此Demo

官网：http://flickity.metafizzy.co/