12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Sep 4, 2018

Custom Carousel using ACF Pro and Owl in Oxygen

Sridhar Katakam

Updated on February 11, 2020

This members-only tutorial provides the steps to

  • add an options page in WordPress using ACF Pro having an image repeater and an overlay text area custom fields
  • outputting the custom fields in a code block element in a format suitable for Owl carousel
  • loading Owl carousel in my custom functionality plugin
  • initializing the Owl carousel on the container of the images

for showing an auto-playing continuously looping carousel of images with static overlay text on the top.

Live Demo

Requirements:

  1. Pro version of Advanced Custom Fields
  2. The ability to upload files to a plugin directory. This needs to be done via cPanel file manager or a FTP client.

Step 1

Install and activate my custom functionality plugin.

Upload owl.carousel.min.css to the plugin's assets/css directory and owl.carousel.min.js to plugin's assets/js directories via a FTP client.

Step 2

Install and activate ACF Pro.

Step 3

Let's load the CSS and JS files of Owl on the page where the carousel is to be shown, register a custom size for images in the carousel and enable ACF settings page.

Edit plugin's plugin.php file.

Replace the code inside sk_enqueue_files() with:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right