Find your next open-source project

Search by name, purpose, or keyword — or paste a GitHub repository URL

metafizzy/flickity

Developer Tools

A JavaScript library for building touch-enabled, responsive, flickable carousels and galleries on web pages.

7,559
589
JavaScript
11 years old

Overview

Flickity is a JavaScript carousel library for building touch-enabled, responsive sliders and galleries in web pages. It handles dragging, flicking, and snapping to cells, with built-in options for navigation buttons, page dots, autoplay, lazy loading, and right-to-left layouts (1)(2).

It is aimed at front-end developers who need a flexible carousel on a site, theme, or application. The library works from a container element with child cell elements (22)(23), so it does not impose a framework: you add markup and initialize it with JavaScript.

Quick start

Include the CSS and JavaScript from unpkg, either by downloading the files or linking them directly (6)(11):

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Alternatively install it with npm or Bower (15):

npm install flickity --save

Create a container with child cells, then initialize Flickity on it (23)(24):

<div class="carousel">
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
</div>
var flky = new Flickity('.carousel', {
  cellAlign: 'center',
  wrapAround: true
});

The resulting gallery supports dragging and flicking, and the second argument accepts options such as autoPlay, cellAlign, prevNextButtons, and pageDots (24).

Constraints

  • Flickity is licensed under GPLv3 for open source applications; commercial sites, themes, projects, and applications require a separate commercial license (17)(19)(21).
  • The README lists options such as accessibility and lazyLoad, but the full API, demos, and integration details are hosted on the project site rather than in the README (2).
  • Image lazy loading uses the data-flickity-lazyload attribute, and some layout options such as percentPosition depend on whether cells use percentage or pixel widths (24).

HotRepo's take

No HotRepo rank snapshots, star curve, or discussion threads are available for this repository, so there is no site-recorded trend to comment on. The practical signal here is the project's longevity and distribution: it was created in 2014, has a mature unpkg distribution path, and is documented on its own site, which makes it a workable choice for developers who need a carousel library and can comply with its dual-license model.

Written by AI from the project's README, updated . The project's own docs are the source of truth.