簡介

flickity是一款自適應手機觸屏滑動外掛，它的API引數很豐富，包括對齊方式、迴圈滾動、自動播放、是否支援拖動、是否開啟分頁、是否自適應視窗等。

線上演示及下載

演示地址

下載頁面

使用方法

引入檔案

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

html

增加js-flickity class到物件.

<div class="gallery js-flickity">
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
  ...
</div>
 

呼叫JS

第一種方法

$('.main-gallery').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

第二種方法
Vanilla JavaScript的方法：

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
});
 

第三種方法
你同樣可以在HTML中就可以呼叫Flickity，無需編寫任何JavaScript。

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

引數