How to turn Featured posts into a Carousel using Owl Carousel

In a Genesis customization task I completed today, the requirement was to display 4 posts output by Genesis Featured Posts widget.

The posts should appear in 4 columns on the desktops and in 3 columns on mobiles with automatic sliding to the left to reveal the fourth post and sliding to the right again in a rewinding fashion.

In this tutorial, I share the steps to use Widget Output Filters plugin to add the classes needed by Owl Carousel jQuery script to selective widgets and initialize Owl with configuration parameters for desktop and mobile.

While the tutorial has been written for Brunch Pro 2.2.2, it should work with a few adjustments in any Genesis theme.

Step 1

Install and activate Widget Output Filters.

Step 2

a) Upload owl.carousel.min.css and owl.theme.default.min.css to child theme's css directory (create, if not present).

b) Upload owl.carousel.min.js to child theme's js directory.

Create a file named say, owl-init.js in the same location having the following: