flickity.metafizzy.co Open in urlscan Pro
2a05:d014:275:cb01::c8  Public Scan

Form analysis
0 forms found in the DOM

Text Content

 * Flickity v2
 * Style
 * Options
 * API
 * Events
 * Extras
 * License


FLICKITY

Touch, responsive, flickable carousels

Flickity on GitHub 7,491

Easy to use.

Fun to flick.

Flickity makes carousels, galleries, & sliders that feel lively and effortless.

 * Physics-based animation
 * Touch enable
 * Responsive styling
 * Full-feature API

Made by Metafizzy.

You make the things that matter.

We make the widgets.

 1. 
 2. 
 3. 
 4. 

Download flickity.pkgd.min.js
Download flickity.css
Download these docs
 * 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.

Flickity Commercial Developer License for 1 developer $25 Flickity Commercial
Team License for up to 8 developers $110 Flickity Commercial Organization
License for Unlimited developers $320


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

 * Style
 * Options
 * API


FEATURE SHOWCASE


WRAPAROUND

 1. 
 2. 
 3. 
 4. 
 5. 

Edit this demo on CodePen

Wrap-around the end back to the beginning for infinite scrolling.


FREESCROLL

 1. 
 2. 
 3. 
 4. 
 5. 

Edit this demo on CodePen

Freely flick and scroll content without alignment.


GROUPCELLS

 1. 
 2. 
 3. 
 4. 

Edit this demo on CodePen

Groups cells together to act as individual slides.


AUTOPLAY

 1. 
 2. 
 3. 
 4. 
 5. 

Edit this demo on CodePen

Automatically advance to the next cell.


LAZYLOAD

 1. 
 2. 
 3. 
 4. 
 5. 
 6. 
 7. 
 8. 
 9. 

Edit this demo on CodePen

Load cell images when selected.


PARALLAX

 1. 
 2. 
 3. 
 4. 
 5. 
 6. 
 7. 

Edit this demo or vanilla JS demo on CodePen

Parallax effects on scroll event.


IMAGES

Flickity makes beautiful image galleries.

 1. 
 2. 
 3. 
 4. 
 5. 
 6. 
 7. 
 8. 
 9. 

Edit this demo on CodePen


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

 1. 
 2. 
 3. 
 4. 
 5. 
 6. 


PEOPLE LIKE FLICKITY




People like Flickity - Curated tweets by metafizzyco



 * Flickity v2
 * Style
 * Options
 * API
 * Events
 * Extras
 * License

Metafizzy makes delightful web plugins & logos


 * ISOTOPE
   
   Filter & sort magical layouts


 * INFINITE SCROLL
   
   Automatically add next page


 * PACKERY
   
   Gapless, draggable grid layouts


 * LOGO PIZZA
   
   Hot & ready logos for sale


 * FIZZY SCHOOL
   
   Lessons in JavaScript for jQuery newbies

Follow @metafizzyco on Twitter for Flickity updates

Metafizzy logo