Custom Carousel using ACF Pro and Owl in Oxygen

September 4, 2018 Sridhar Katakam 5 Comments

Oxygen, Page Builders, Premium ACF, ACF Pro, Carousel, Owl, Repeater

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: https://oxygen.wpdemos.net/featured-carousel/

Requirements:

Pro version of Advanced Custom Fields
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 ($27/month or $169 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

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

Frankly, although closely related to something I desperately need to do sooner than later (my video carousel from posts tutorial request), I am turning away from this tutorial because at least one of the “plugins” is found on GitHub, not the WordPress repository. I really feel like the security of a website (WordPress) depends on the ongoing maintenance efforts of the plugin developers, and their updating their plugins via the standard push updates in WordPress. The last thing I want to do is start using plugins that are sideloaded and need me to keep an eye on GitHub for updates.

Please, I beg of you, provide functionality via “approved” plugins that are being actively maintained.

Reply

Sridhar Katakam says:

September 15, 2018 at 9:49 am

Here is the link to my other tutorial I wrote based on your request: https://wpdevdesign.com/custom-youtube-video-carousel-using-pods-and-owl-in-oxygen/

My custom functionality on Github is a plugin I authored and maintain. There is no security problem that it has as it is a pretty simple one and I will keep updating it if and when it needs to, because it is something I personally use on all Oxygen sites I build.

I will put it in the WP repo if that eases your mind.

Loading...

Reply
- djMot says:
  
  September 15, 2018 at 11:27 am
  
  I just noticed the other tutorial this morning scanning through posts on Facebook. THANK YOU! I will go look at it in a moment.
  
  Sorry, I didn’t know you are the author of My Custom Functionality. That by itself makes me feel better about it as I consider you a trusted source. But that aside, and not just for my sake, I think everyone appreciates the ease of installing, activating, and getting updates to plugins from the repository.
  
  Loading...
  
  Reply
- djMot says:
  
  September 16, 2018 at 2:09 am
  
  NVM. Upon looking at the plugin, there’s nothing really there but a template for additional functionality. No point in adding it to the repo. 🙂
  
  Loading...
  
  Reply