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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: