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.
thanks for this. :)
i am wondering if there is a recommended approach for keeping page load times down when, for example, there may be a large amount of images in the list to be rendered or if the images themselves have quite high filesizes. is there a way to load new images via ajax? or a similar approach to dynamic list loading?
I always use placeholder images for all slides but the first two – usually a tiny inline base-64 png file. Then when the carousel is activated, swap out the next image in sequence. I haven’t tried Flickity yet, but I imagine it could work the same way.
Lazy loading is a hotly requested feature for Flickity. I plan on adding support for it down the road.
You can simply combine lazySizes with Flickity. lazySizes is a lazyloader that detects any visibility changes to current and also any future images out of the box without any configuration and therefore works with any kind of JS/CSS behavior. Here is a demo with lazySizes and flickity. (here is also an example with lazysizes and isotope)
If you care about lazy load, there is this carousel plugin (currently under development but we already use it in production at my company): http://iliketomoes.github.io/elbajs/.
Pros: lazy load, multi serve images, dependency free, zero element loading (for browser which support animations), MIT license.
Cons: IE9+, just for images, still needs some improvements.
Sorry about the link, there is a typo.
This is the right one:
http://iliketomatoes.github.io/elbajs/
I wonder how this compares to something like slick slider. There are so many slider libraries out there… for new developers it’s tough for them to figure out which one is good. There’s a great opportunity for someone to create a place of review of all these little widgets.
Slick Slider has most of the same features (I just used it in a project), except the freeScroll feature.
Still, they both seem to be great slider/carousel plugins.
I’m currently using owl carousel but I like the look of flickity. It uses percentages and you can set the width of each slide in your css with media queries as well. I also like that you can preview the previous and next slides if you set the width to less than 100%.
http://bxslider.com/ is definitely a good one. It has extra high level of customization and build in features and unlike flickity, it is free for commercial use! Just check out examples and api and it will be clear.
We’ve used Slick slider quite a bit due to it’s small size, lazy-loading and good browser support. We’ve found it to be more stable than flexslider.
The only initial downside I see with Flickity is the lack of IE8 browser support. Many of our clients still have 10-12% of their visitors using IE8 so I’m not sure if the fallback Flickity has would work well enough.
Thanks for taking a look! Flickity’s browser support includes IE8+ and Android 2.3+.
Was planning to remove the carousel from my site this week… will just replace it with one of these instead! They’re great
I’m with a couple of the other comments, what about some sort of lazy load-y type bandwidth saver? Anything? On the road map perhaps?
Maybe I missed it here but to me one of the most critical functions of a carousel can include a paragraph of text as a ‘footer’ which explains the image and can contain links.
Is there a way to fix the buggy effect that happens when you click and drag outside the frame? Right now it refuse to let release the drag if you don’t release before leaving the frame. I see this a lot on carousels and it always bugs me.
As mentioned in the article
Actually, it doesn’t work on regular pages if you’re browser doesn’t fill the entire screen. If you drag outside the browser window the same issue occurs.
Of course it doesn’t work. Your mouse is no longer in the browser, so the browser can’t possibly know what you are doing with it…
Looks cool! Is there any way the slider can be controlled with trackpad gestures, such as side-scrolling on my MacBook?
This looks great but I’ve found an issue. When you try to scroll down on the slider the touch detection on the plugin seems to prevent the default page scroll.
This is a pretty significant UX issue. If it gets fixed or there’s some kind of workaround then i’d certainly look at using this in my projects.
I should clarify: This is when attempting to scroll on a touch device.
Hi Robert! Thanks for taking a look. Handling vertical scrolling on touch devices is a tricky situation. The current behavior is that you can both slide the carousel, and still scroll the page vertically. I’m evaluating changing this behavior. See Flickity Issue #67
Thanks for the reply David. I’ve encountered similar issues myself when I attempted to make the Bootstrap carousel respond to touch and couldnt figure out a solution to allow vertical scrolling. Maybe some kind of debounce -like- function would help?
How do you handle
wrapAroundinternally? Do you clone cells, move cells in the DOM, absolutely position cells, or use a different technique?Cells at the ends are re-positioned so they appear next to the end that is most visible. See how it’s done in the source
Looks awesome and quite perfect to me. The only thing i’m missing so far is some kind of ‘autoScroll’ when using the ‘freeScroll’ Option. ‘autoPlay’ is not working as expected.
Some things I love about Flickity:
<div>s that are the “slides”. It could be images or movies or text or absolutely anything. And you just get a simple class to know which one is active, which means you can do any styling you want for the active (and inactive) slides easily.contentproperty? So nice.Imho, we don’t need carousels like Flickity. It’s not 2008 anymore. Such type of scrollers can be replaced with native
overflow-x:scrolland it’ll be fast and accessible. Even companies like Apple and Google start usingoverflow:automore and more.There is even spec on w3.org to allow snapping to items. It’s already present in IE and soon will be in Safari http://dev.w3.org/csswg/css-snappoints/
There was also a good article on CSS-tricks such type of carousel.
Hi,
Not ok for Chrome, but Firefox makes it work :)
Simply awesome script! Thank you for this presentation.
That’s a good alternative to OwlCarousel or iDangerous’ Swiper.
Nice day!
And also don’t forget Slick, RoyalSlider and iScroll and dozens of similar scripts. I’d prefer iScroll instead of Flickity, very solid script https://github.com/cubiq/iscroll
This is very saddening. Have we already forgotten about the UX disaster carousels cause? Let alone that this plugin is over 5000 lines long? For just a carousel?
Let’s spare our users the frustration, and completely ignore carousels altogether.
The first 4 paragraphs of the article discuss the troubles that carousels can cause and how Flickity addresses them. Whether a developer chooses to use a carousel is up to her. But if she does, I hope she chooses Flickity because it aims to quell many of the problems that other carousels hold.
Flickity’s source code is 5000 lines long because it includes all its features and dependencies for easy use. If you are concerned about file size, you can build your own by editing js/index.js. I wrote about Flickity’s file management here.
Hey David,
Love your work, keep doing!
With admiration from Paris,
Is this more feature-full than owlcarousel?
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
I dont see anything new so asking for confirmation.
A little late at the party but you should check the scroll direction and enable/disable the carousel if it’s vertically. -> you cant scroll down on mobile. Huge pain in the ass. Gives you the feeling of having a google maps embed.
Hi David,
Nice work, I love your code :)
Thanks David,
Very useful work you done.
Hello to all and thank you David for this amazing Script. I tried to integrate Slick and Swiper, but as a newbie i understand Flickity much better.
One question i have. As i have a gallery slider with 1 to X images, i always want to center the images. Even if i just have 1 image. text-align: center does not work.
For example i have:
or
As i have different width of the images i use this CSS:
and this JS:
Can someone help me with this?
Greets and thx Fabo
Sorry its again me, i got it to work.
Just needed to use:
and removing:
from .flickity-gallery
I wanted integrate Fancybox2, but when i want to drag the Flickity content always open Fancybox picture. I needed to change Flickity to:
Any idea how i can use Flickity with Fancybox2?
Greets Fabo
Hi David,
I must say that your work on Flickity really ends my struggle to find a carousel script for years. I bought the developer licence immediately after skimming through the docs.
Just to let you know I’ve been struggling with several carousel scripts for years, saw a lot of use cases that they can’t handle properly and ends up not using them in my projects.
The main thing I don’t like about carousel scripts is as you said, they are unfriendly for developers. Either they are hard to configure, needs you to specify breakpoints as a JS object, does not handle items with width: auto, height: 100% very well or has their own drawbacks on specific cases.
But today when I was looking (again) for a good carousel script to implement in my project, I saw this post here, took a look at it and saw it was developed by Metafizzy. Wow, I thought this must be a good one!
Now I just spent five minutes working with it, and my problem for years with width: auto, height: 100% carousel items has been solved.
Thanks for this great script! Looking forward to features like lazy loading and mechanism to keep items out of the DOM when not displayed.
Hi, is it possibile to select how many items scroll a time ?
In demos i see only scroll 1 item a time.
Let me know
thanx!