- 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
- Next
- Featured options
- wrapAround
- freeScroll
- autoPlay
- watchCSS
- View all options
- Images
- imagesLoaded
- lazyLoad
- Flickity in use
- People like Flickity
Quick start
Start using Flickity in three steps.
-
Download Flickity
flickity.css
andflickity.pkgd.min.js
files. -
Add the Flickity
.css
and.js
files to your site.<link rel="stylesheet" href="/path/to/flickity.css" media="screen">
<script src="/path/to/flickity.pkgd.min.js"></script>
-
Add
js-flickity
class to carousel elements.<div class="carousel js-flickity"> <div class="carousel-cell"></div> <div class="carousel-cell"></div> ... </div>
That’s it! You’re all set to start using and customizing Flickity.
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 npmcdn.
<link rel="stylesheet" href="https://npmcdn.com/flickity@1.2/dist/flickity.css">
<!-- or -->
<link rel="stylesheet" href="https://npmcdn.com/flickity@1.2/dist/flickity.min.css">
<script src="https://npmcdn.com/flickity@1.2/dist/flickity.pkgd.js"></script>
<!-- or -->
<script src="https://npmcdn.com/flickity@1.2/dist/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.
Commercial licenses are no longer available for Flickity v1. Upgrade to Flickity v2 to purchase a current commercial license.
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 js-flickity
to the class of the carousel element. Options can be set with a data-flickity-options
attribute.
<div class="main-carousel js-flickity"
data-flickity-options='{ "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
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 carousel 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 carousel 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 */
.carousel:after {
content: 'flickity';
display: none; /* hide :after */
}
@media screen and ( min-width: 768px ) {
/* disable Flickity for large devices */
.carousel:after {
content: '';
}
}
View all options
Images
Flickity makes beautiful image galleries.
<div class="carousel 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>
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
imagesLoaded
requires the flickity-imagesloaded package. It already is included with flickity.pkgd.js
, but not with Flickity as a stand-alone package. If you are using Browserify or RequireJS without flickity.pkgd.js
, you need to install and require flickity-imagesloaded
separately. See details in Extras.
lazyLoad
Loads cell images when a cell is selected.
Set the image's URL to load with data-flickity-lazyload
.
<img data-flickity-lazyload="full.jpg" />
<!-- Set optional placeholder src -->
<img src="placeholder.jpg" data-flickity-lazyload="full.jpg" />
lazyLoad: true
// lazyloads image in selected cell
<div class="carousel">
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="tulip.jpg" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="grapes.jpg" />
</div>
...
</div>
Set lazyLoad
to a number to load images in adjacent cells.
lazyLoad: 2
// load images in selected cell
// and next 2 cells
// and previous 2 cells
After loading the image, Flickity will add flickity-lazyloaded
class to the image, or flickity-lazyerror
to a broken image. You can use this class to add a transition when images are loaded.
/* fade in image when loaded */
.carousel-cell-image {
transition: opacity 0.4s;
opacity: 0;
}
.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
opacity: 1;
}
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.
The Field
Engadget
yeezysupply.com
We Doki Doki
Artsy
Codrops Photography Website Concept
District Shopify theme
Vibrant Media
Unmissable
Ernst & Young
Architectenbureau Sven Taeymans
Tony Hornecker
Rabbit Hole
Purepeople
EdFuel