I’ve done a lot of looking at gallery/slider/carousel plugins for WordPress, and haven’t been terribly enthusiastic about the selection. Very few interface directly with the WP Media Library, for instance, or allow easy categorization/photo album structure, and the responsiveness situation isn’t inspiring. Time to roll my own.

Edit: Since I have made so many additions to Twenty Fifteen, I thought it would be useful to assemble them into a single child theme. You can see the Fancy Fifteen code on GitHub, or look at all posts here tagged fancyfifteen.

The goal here: a front page carousel that could be easily updated, with just half a dozen or so selections from the most recent images added to the site. The pictures would be human-chosen. The carousel needed to be responsive and easy to navigate (for everyone; i.e., accessible), and ideally the whole shebang could coordinate with a filterable photo gallery to be created for the same site.

Enter Media Library Assistant. There are two functions of MLA that are important for this use: the addition of taxonomies to media library items directly, and the expansion of WordPress’s gallery shortcode into mla-gallery, with dynamic selection of media items by taxonomy, user-defined templates (as in direct control of the gallery’s HTML structure), and many other settings.

I figured I could apply a nice jQuery carousel to an MLA gallery of the correct form, and after looking around, Flickity seemed like the best candidate (with the implicit recommendation of CSS-Tricks). It is responsive, accessible, well-adapted to mouse/trackpad, keyboard, and touch, and styleable from the theme’s CSS file. After one significant (but easily remedied) hiccup we were in business!

Here’s how to set it up. There are some places where I made arbitrary decisions (such as downloading flickity.css but using a CDN for the .js file), but it should be easy to figure out how to make different ones.

For specificity, we’ll make a child theme to add this functionality to Twenty Fifteen. For now you can see this on my WordPress test site but there is no guarantee that will continue to be true indefinitely.

style.css:

Many themes set max-width: 100% on images for responsiveness purposes; it keeps them from exploding out of their housings when the browser gets smaller. However, you have to override it here or the images you can’t originally see may collapse to width 0. That was the hiccup I referred to – why is there blank white space when I click through the carousel?!? The last section highlights the gallery if you tab to it so you know you’ve tabbed to it; it’s straight off the Flickity website. I set a height of 200px; you can let it be determined by the images by removing that line of CSS and the line setGallerySize: false in carousel.js, below.

carousel.js:

functions.php:

Just put flickity.css, carousel.js, functions.php, and style.css (for your child theme) all into a folder called twenty-fifteen-flickity, zip it up, and upload it.

In Settings -> Media Library Assistant -> MLA Gallery (the middle tab), scroll to the bottom and create a template called carousel. Fill in the following boxes:
Open: <div id='carousel-gallery' class='carousel-no-js'>
Item: <div class='carousel-item'>
[+link+]
</div>
Close: </div>

In Media -> Assistant, tag all images for the slideshow with “featured” (or something else, and then change “featured” in the shortcode below).
Where you want the carousel, place the shortcode
[mla_gallery attachment_tag=featured mla_style="none" mla_markup="carousel" size=medium link=full]

Some notes:
– Most everything is adjustable from the CSS file, the MLA shortcode options, or the Flickity options.
– You’ll have to add appropriate styling for responsiveness, but no differently from usual.
– For graceful degradation the images start with the class carousel-no-js and carousel.js replaces that with carousel-js-on; I haven’t styled .carousel-no-js at all and wouldn’t count this as finished without doing so, but how to style it is a matter of taste.
– I threw a lightbox plugin onto the test site as well (Responsive Lightbox by dfactory) and it works without a squawk.