The following is a guest post by David DeSandro. David is a legend in front-end design and development. He's worked for top agencies like nclud and huge products like Twitter, all the while building amazing open source projects like Masonry and Packery. Lately he's been full time on these open source projects as Metafizzy, the latest one he'll tell you about here.

By now, any article about carousels should come with the disclaimer: You may not need a carousel. Carousels are easily abused. Kyle Peatt has more details on the carousel controversy.

Part of the blame can be put on the user experience of carousel plugins themselves. Scrolling through a carousel is less satisfying and more awkward that simply scrolling down a page. Basically, you can't flick through them. Third-party libraries should at least be as useful as native behavior.

On top of user-unfriendliness, most carousels plugins have plenty of developer-unfriendly pain points. Because they are configured with JavaScript, it's often difficult to change the configuration for other breakpoints. These carousel libraries can hinder developers to design responsively.

I've created Flickity to resolve both these issues. For your users, Flickity's carousels are fun to flick. Flickity uses physics based animation so dragging and flicking feels natural. For you, Flickity's carousels are easy to implement. Flickity is designed to be flexible, allowing you to leverage your own CSS to style your carousels responsively.

Using Flickity

To use Flickity, first add its .css and .js files to your page or asset pipeline.

<head>
  <!-- other head stuff... -->
  <link rel="stylesheet" href="/path/to/flickity.css" media="screen">
</head>
<body>
  <!-- all your great html... -->
  <script src="/path/to/flickity.pkgd.min.js"></script>
</body>

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

<div class="main-gallery">
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  ...
</div>

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

$('.main-gallery').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

You can use Flickity with vanilla JS:

var flkty = new Flickity( '.main-gallery', {
  // options
  cellAlign: 'left',
  contain: true
});

You can conveniently initialize Flickity in HTML, without writing any JavaScript. Add js-flickity to the class of the gallery element. Options can be set with a data-flickity-options attribute in JSON. I recommending initializing with HTML if you're not adding additional behavior with JS.

<div class="main-gallery js-flickity"
  data-flickity-options='{ "cellAlign": "left", "contain": true }'>

Styling Flickity

You can size and style cells however you like with your own CSS. Flickity provides a container element so that cell elements can be sized with percentage widths — no sizing configuration in JS, just normal % values that you're used to. The height of the gallery is set to the maximum height of the cells.

See the Pen Flickity - full-width cells by David DeSandro (@desandro) on CodePen.

(Because the embedded Pens are in iframes, you won't be able to drag outside of the demo window. But, it's cool — dragging works on normal pages.)

Because cells are sized and styled with CSS, you can use media queries to show different number of cells for different breakpoints. Try resizing this media query Pen to see it in action.

/* full width cells by default */
.gallery-cell {
  width: 100%;
}

@media screen and ( min-width: 768px ) {
  /* half-width cells for larger devices */
  .gallery-cell { width: 50%; }
}

Even the previous & next buttons and the page dots are styleable.

See the Pen Flickity - custom prev/next button & page dot style by David DeSandro (@desandro) on CodePen.

Flickity adds a is-selected class to the selected cell.

See the Pen Flickity - is-selected class by David DeSandro (@desandro) on CodePen.

You can use the is-selected class to make for some impressive transitions. This image gallery dims and blurs adjacent cells. Images are centered within cells with flexible-box CSS.

See the Pen Flickity - image gallery with selected style by David DeSandro (@desandro) on CodePen.

That's all there is to it. Flickity creates touch-friendly, flickable carousels that are easily styled with CSS. Everything else is fine-tuning your implementation to suit your vision..

Flickity options

Flickity has a several more nice features enabled with its options. Here's a couple of my favorite.

wrapAround: true wraps cells around to the other end, so you can keep flicking without hitting an end.

See the Pen Flickity - wrapAround by David DeSandro (@desandro) on CodePen.

freeScroll: true enables cells to be freely scrolled and flicked without aligning cells to an end position. Give this one a good flick!

See the Pen Flickity - freeScroll by David DeSandro (@desandro) on CodePen.

Combine enabling freeScroll and wrapAround and it feels like you can flick it forever man.

See the Pen Flickity - freeScroll, wrapAround by David DeSandro (@desandro) on CodePen.

You can design layouts where Flickity is enabled for some breakpoints, but disabled for others. With watchCSS: true, Flickity watches the content of :after of the gallery element. Flickity is enabled if :after content is 'flickity'.

/* enable Flickity by default */
.gallery:after {
  content: 'flickity';
  display: none; /* hide :after */
}

@media screen and ( min-width: 768px ) {
  /* disable Flickity for large devices */
  .gallery:after {
    content: '';
  }
}

Try resizing the watchCSS Pen to see it in action.

This is a pretty cool feature as it saves you from writing hacky JavaScript on window resize. As enabling is triggered with CSS, it keeps your media query logic all in one place.

In addition to options, Flickity has a full-featured API, with useful methods, properties and events. Flickity's API allows you to build upon its base functionality so can be used in combination with other widgets and behaviors in your site.

---

True, you may not need not a carousel. But if you do, you should use one that both helps your users and helps yourself. Flickity is easy to implement and flexible to work with. Using Flickity allows you to create carousels, galleries, and sliders that fit in seamlessly with your designs. I hope Flickity empowers developers to utilize carousels to create compelling user experiences. If nothing else, flicking them is pretty fun.

Share On

Twitter Facebook Google+