flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果，可以自动播放，是一款移动优先的jQuery幻灯片插件。
安装方法：可以通过Bower或npm来安装：
Bower: bower install flickity --save npm: npm install flickity --save使用方法：
要使用该幻灯片插件首先要在页面中引入 flickity.pkgd.js 和 flickity.css 文件。
<link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script>该幻灯片的HTML结构如下：
<div class="gallery"> <div class="cell">...</div> <div class="cell">...</div> <div class="cell">...</div> ... </div>你可以将该幻灯片插件当做一个jquery插件来调用：$('selector').flickity()
$('#main-gallery').flickity({
// options
cellAlign: 'left',
contain: true
});
你也可以使用纯js来调用该插件：new Flickity( elem )。Flickity()构造函数接收两个参数：幻灯片元素和参数选项。
var elem = document.querySelector('#main-gallery');
var flicky = new Flickity( elem, {
// options
cellAlign: 'left',
contain: true
});
// element argument can be a selector string
// for an individual element
var flicky = new Flickity( '#main-gallery', {
// options
});
你还可以在HTML中初始化Flickity插件，不用写任何的js代码。你只需要在幻灯片元素上添加class js-flickity，可以通过data-flickity-options属性来设置参数。
<div id="main-gallery" class="js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true }'>
在HTML中设置的参数必须是正确的JSON格式的数据。JSON数据中，keys需要双引号引起来。注意：data-flickity-options属性的值用单引号，JSON数据的值用双引号。
Flickity对象的构造函数：
var flky = new Flickity( '.gallery', {
// options, defaults listed
accessibility: true,
// enable keyboard navigation, pressing left & right keys
autoPlay: false,
// advances to the next cell
// if true, default is 3 seconds
// or set time between advances in milliseconds
// i.e. `autoPlay: 1000` will advance every 1 second
cellAlign: 'center',
// alignment of cells, 'center', 'left', or 'right'
// or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)
cellSelector: undefined,
// specify selector for cell elements
contain: false,
// will contain cells to container
// so no excess scroll at beginning or end
// has no effect if wrapAround is enabled
draggable: true,
// enables dragging & flicking
freeScroll: false,
// enables content to be freely scrolled and flicked
// without aligning cells
friction: 0.2,
// smaller number = easier to flick farther
imagesLoaded: false,
// if imagesLoaded is present, Flickity can re-position cells
// once images are loaded
initialIndex: 0,
// zero-based index of the initial selected cell
percentPosition: true,
// sets positioning in percent values, rather than pixels
// Enable if items have percent widths
// Disable if items have pixel widths, like images
prevNextButtons: true,
// creates and enables buttons to click to previous & next cells
pageDots: true,
// create and enable page dots
resizeBound: true,
// listens to window resize events to adjust size & positions
watchCSS: false,
// watches the content of :after of the element
// activates if #element:after { content: 'flickity' }
// IE8 and Android 2.3 do not support watching :after
// set watch: 'fallbackOn' to enable for these browsers
wrapAround: false
// at end of cells, wraps-around to first for infinite scrolling
});
可用参数
cellAlign ：幻灯片元素中的单元对齐方式。可选值为：'center', 'left', 'right'。默认值为'center'。
示例：
cellAlign: 'left'wrapAround ：该参数可用于制作无限循环的幻灯片。设置为true时为无限循环。默认值为false。示例：
wrapAround: truecontain ：在幻灯片的开始或结束处包含一个单元格，防止幻灯片溢出。可选值为true和false。默认值为false。示例：
contain: truefreeScroll ：允许自由滚动，最后一个单元格没有对齐格子。可选值为true和false。默认值为false。示例：
freeScroll: true允许freeScroll和contain可制作简单的水平滚动。
freeScroll: true,
contain: true,
// disable previous & next buttons and dots
prevNextButtons: false,
pageDots: false
freeScroll和contain设置为true的效果：
freeScroll: true,
wrapAround: true
autoPlay ：设置自动播放。如果autoPlay: true则每3秒切换一次。幻灯片切换的速度单位是毫秒，例如设置为autoPlay: 1500则1.5秒切换一次。
在鼠标滑过幻灯片时，自动播放将停止，鼠标离开后重新开始自动播放。幻灯片被点击或单元格被选择时，自动播放也会停止。
可选值：true和false或一个整数。默认值为false。
autoPlay: truewatchCSS ：你可以通过CSS来使用或禁用Flickity。watchCSS选项关注幻灯片元素的:after伪元素的内容。如果:after伪元素的content是flickity则幻灯片可用。
IE8和Android 2.3不支持:after。当设置watchCSS: true时Flickity不可用。可以在这些浏览器上设置watchCSS为'fallbackOn'来使用Flickity。
watchCSS: true
/* enable Flickity by default */
.gallery:after {
content: 'flickity';
display: none; /* hide :after */
}
@media screen and ( min-width: 768px ) {
/* disable Flickity for large devices */
.gallery:after {
content: '';
}
}
使用图片
Flickity可以制作效果很酷的图片幻灯片特效。
<div class="gallery js-flickity"
data-flickity-options='{ "imagesLoaded": true, "percentPosition": false }'>
<img src="1.jpg" alt="orange tree" />
<img src="2.jpg" alt="submerged" />
<img src="3.jpg" alt="look-out" />
...
</div>
imagesLoaded ：没有价值的图片是没有尺寸的，它们会跑到单元格之外。为了修补这个问题，可以使用imagesLoaded来将图片重新定位。可选值：true和false，默认值为false。
imagesLoaded: true该选项需要在页面中引入 imagesLoaded 。
<script src="/path/to/imagesloaded.pkgd.js"></script>其它可选参数
accessibility: true, // enable keyboard navigation, pressing left & right keys cellSelector: undefined, // specify selector for cell elements draggable: true, // enables dragging & flicking initialIndex: 0, // zero-based index of the initial selected cell percentPosition: true, // sets positioning in percent values, rather than pixels // Enable if items have percent widths // Disable if items have pixel widths, like images pageDots: true, // enables page dots prevNextButtons: true, // creates and enables buttons to click to previous & next cells resizeBound: true, // listens to window resize events to adjust size & positions rightToLeft: false // enables right-to-left ordering for right-to-left languages还有一些用法请参考演示页面中的说明。
