New! Flickity v2.2

Flickery Wix, Irvine, North Ayrshire. Handmade hand poured natural soy wax melts, highly fragranced for best scent throw. Handmade reed diffusers with premium fragrance oil for long. Flickery meaning Seeming to flicker; unsteady.

• Set initialIndex to a selector string
• Better accessibility with aria-hidden on unselected slides

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.

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.

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

There are several ways to initialize Flickity.

Initialize with jQuery

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

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.

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.

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

Flickery Meaning

Feature showcase

wrapAround

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

freeScroll

Freely flick and scroll content without alignment.

groupCells

Groups cells together to act as individual slides.

autoPlay

Automatically advance to the next cell.

lazyLoad

Load cell images when selected.

Parallax

Edit this demo or vanilla JS demo on CodePen

Parallax effects on scroll event.

Flickery Meaning

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.

People like Flickity

Google uses cookies and data to:

• Deliver and maintain services, like tracking outages and protecting against spam, fraud, and abuse
• Measure audience engagement and site statistics to understand how our services are used

If you agree, we’ll also use cookies and data to:

• Improve the quality of our services and develop new ones
• Deliver and measure the effectiveness of ads
• Show personalized content, depending on your settings
• Show personalized or generic ads, depending on your settings, on Google and across the web

For non-personalized content and ads, what you see may be influenced by things like the content you’re currently viewing and your location (ad serving is based on general location). Personalized content and ads can be based on those things and your activity like Google searches and videos you watch on YouTube. Personalized content and ads include things like more relevant results and recommendations, a customized YouTube homepage, and ads that are tailored to your interests.

Click “Customize” to review options, including controls to reject the use of cookies for personalization and information about browser-level controls to reject some or all cookies for other uses. You can also visit g.co/privacytools anytime.