Custom Category Images Carousel in Genesis using Flickity

In my Facebook group a user wrote:

How to display categories or post images above header in a slider style format.

We can use WP Term Images to associate images with categories and display these along with the category titles in a carousel above the primary nav above the header using Flickity in Genesis.

Note:

• After recording the above video I have adjusted the code to avoid FOUC (Flash of Unstyled Content) so the carousel fades in rather than the images appearing one below the other and then aligning in columns on the initial page load.
• We shall ensure that solution is responsive by showing 4 columns on desktop widths, 3 near tablet widths and 1 around mobile widths
• We shall relocate the primary nav from below the header to above it and set it a dark background
• On desktop widths, we will set four categories to be featured at a time and the user can navigate to next set of 4 by using the prev/next buttons or dragging (flicking) left or right
• We shall enable infinite scrolling. Auto playing is optional
• A default fallback image will be set to be shown for categories that do not have associated images set

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Install and activate WP Term Images. At Posts > Categories, edit the categories that you wish to feature in the carousel slider and upload/select the corresponding images.

Step 2

Upload flickity.min.css to child theme's css directory (create if not existing).

Upload flickity.pkgd.min.js to child theme's js directory.

Step 3

Add the following in child theme's functions.php: