flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。

安装方法

可以通过Bower或npm来安装:

Bower: bower install flickity --save

npm: npm install flickity --save
                

使用方法

要使用该幻灯片插件首先要在页面中引入 flickity.pkgd.js 和 flickity.css 文件。该幻灯片的HTML结构如下:


                

你可以将该幻灯片插件当做一个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属性来设置参数。