JavaScript响应式轮播图插件–Flickity-Web前端(W3Cways.com)

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

快速使用

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

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

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

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

增加js-flickity class到对象.

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

下载

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

CDN

<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">

<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>

调用方法

第一种：

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

$('.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 }'>

功能选项

wrapAround

循环从一端滑向另一端

wrapAround: true

在CodePen上编辑此Demo

freeScroll

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

freeScroll: true

在CodePen上编辑此Demo

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

freeScroll: true,
contain: true,
// disable previous & next buttons and dots
prevNextButtons: false,
pageDots: false

在CodePen上编辑此Demo

autoPlay

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

autoPlay: true
// 默认为每隔3秒切换，也可以设置为数字，如1500，效果可以打开旁边的Codepan链接进行修改

在CodePen上编辑此Demo

Images

纯图片轮播。

<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>