Just a quick note this week. The JavaScript add-on Flickity is fun, but I don’t always get what I want from it immediately. Here’s the key I’ve deduced: everything Flickity is applied to needs to have accurate size beforehand. I’ve encountered two situations where that was not the case.

The first, explained in my MLA + Flickity post, was when max-width: 100% set on images was causing anything not visible at the beginning of the slideshow to be blank – or, more accurately, zero width.

More recently, I was trying to create a slideshow in a page where most of the content accordion-folds up at mobile size. No applying Flickity with HTML there! If I did, I got one of two outcomes: if I set a height on my images, they all showed up stacked on top of each other. If not, the whole thing was the height of the combined top and bottom padding of the container. I needed to add a distinguishing class, and then set the accordioning code to check whether a panel it had just opened had that class. If so, apply Flickity from the JavaScript at that point. I’ve had no trouble with repeated opening and closing of the accordion.

Edit 9/30: In fact yet a third issue has arisen: Flickity not knowing the height of the slideshow because it’s being applied before the page content is fully loaded. $(document).ready wasn’t enough; I needed $(window).load(function () { /*call Flickity here*/ });
[Edit 12/12/16: .load was deprecated many versions of jQuery ago and finally removed in v3. Try $(window).on("load", function(){});]

Edit 2/23/16: I don’t know the reason for the conflict as of this writing, but I’ve since discovered that Flickity does not get along with CSS columns. With overflow: hidden; set on .flickity-viewport no images show, and with it removed, some images show outside of the viewport.

I hope this helps someone!

You Must Be This Tall to Ride from Eric Mesa via Flickr.