Flickity

• Quick start
• Install
• Download
• CDN
• Package managers
• License
• Commercial license
• Open source license
• Getting started
• Initialize with jQuery
• Initialize with Vanilla JavaScript
• Initialize with HTML
• Customize
• Featured options
• wrapAround
• freeScroll
• autoPlay
• watchCSS
• View all options
• Images
• imagesLoaded
• Flickity in use

Install

Download

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

CDN

Link directly to Flickity files on cdnjs.

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

Package managers

Install with Bower: bower install flickity --save

Install with npm: npm install flickity

License

Commercial license

If you want to use Flickity to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Flickity commercial licensing.

Once purchased, you’ll receive a commercial license PDF and be all set to use Flickity in your commercial applications.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Flickity under the terms of the GPLv3. Read more about Flickity open source licensing.

Getting started

Include the Flickity .css and .js files in your site.

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

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

Flickity works on a container gallery element with a group of cell elements.

<div class="main-gallery">
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  ...
</div>

There are several ways to initialize Flickity.

Initialize with jQuery

You can use Flickity as a jQuery plugin: $('selector').flickity().

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

Initialize with Vanilla JavaScript

You can use Flickity with vanilla JS: new Flickity( elem ). The Flickity() constructor accepts two arguments: the gallery element and an options object.

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

Initialize with HTML

You can initialize Flickity in HTML, without writing any JavaScript. Add js-flickity to the class of the gallery element. Options can be set with a data-flickity-options attribute.

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

Customize

Make Flickity to your vision. Set options to customize Flickity's behavior. Style cells, previous & next buttons, and page dots with CSS. Utilize Flickity's API with methods and events.

Featured options

wrapAround

At the end of cells, wrap-around to the other end for infinite scrolling.

wrapAround: true

freeScroll

Enables content to be freely scrolled and flicked without aligning cells to an end position.

freeScroll: true

Enable freeScroll and contain for a simple horizontal scroller.

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

Enable freeScroll and wrapAround and you can flick forever, man.

freeScroll: true,
wrapAround: true

autoPlay

Automatically advances to the next cell.

Auto-playing will pause when mouse is hovered over, and resume when mouse is hovered off. Auto-playing will stop when the gallery is clicked or a cell is selected.

autoPlay: true
// advance cells every 3 seconds

autoPlay: 1500 // {Number}
// advance cells ever {Number} milliseconds
// 1500 will advance cells every 1.5 seconds

watchCSS

You can enable and disable Flickity with CSS. watchCSS option watches the content of :after of the gallery element. Flickity is enabled if :after content is 'flickity'.

IE8 and Android 2.3 do not support watching :after. Flickity will be disabled when watchCSS: true. Set watchCSS: 'fallbackOn' to enable Flickity for these browsers.

watchCSS: true
// enable Flickity in CSS when
// element:after { content: 'flickity' }
// Flickity is disabled for IE8 and Android 2.3

/* 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: '';
  }
}

View all options

Images

Flickity makes beautiful image galleries.

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

Edit this demo on CodePen

imagesLoaded

Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded.

imagesLoaded: true

Edit this demo on CodePen

Flickity in use

We’d love to see how you use Flickity! Tweet @metafizzyco or email yo@metafizzy.co to share your work and possibly get it featured here.

Artsy

Codrops Photography Website Concept

EdFuel

Ernst & Young