- Install
- Download
- CDN
- Package managers
- License
- Commercial license
- Open source license
- Getting started
- Initialize with jQuery
- Initialize with vanilla JavaScript
- Initialize with HTML
- Next
- Feature showcase
- wrapAround
- freeScroll
- groupCells
- autoPlay
- lazyLoad
- Parallax
- Images
- View all options
- Flickity in use
- People like Flickity
Install
Download
-
CSS:
- flickity.min.css minified, or
- flickity.css un-minified
-
JavaScript:
- flickity.pkgd.min.js minified, or
- flickity.pkgd.js un-minified
CDN
Link directly to Flickity files on unpkg.
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
Package managers
Install with npm: npm install flickity
Install with Bower: bower install flickity --save
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 carousel element with a group of cell elements.
<div class="main-carousel">
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
...
</div>
There are several ways to initialize Flickity.
Initialize with jQuery
You can use Flickity as a jQuery plugin: $('selector').flickity()
.
$('.main-carousel').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 carousel element and an options object.
var elem = document.querySelector('.main-carousel');
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-carousel', {
// options
});
Initialize with HTML
You can initialize Flickity in HTML, without writing any JavaScript. Add data-flickity
attribute to the carousel element. Options can be set in its value.
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
Options set in HTML must be valid JSON. Keys need to be quoted, for example "cellAlign":
. Note that the attribute value uses single quotes '
, but the JSON entities use double-quotes "
.
Next
Feature showcase
Images
Flickity makes beautiful image galleries.
View all options
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.
Riot Games
The Jane Goodall Institute New Zealand
Cotton Bureau
SXSW Conference
Engadget
unlocked
CustomInk
Artsy
Codrops Photography Website Concept
District Shopify theme
Tony Hornecker
Rookie