Published on Sep 12, 2018

Custom slider in Oxygen using ACF and Owl carousel

Sridhar Katakam

In this members-only tutorial, I show how to

  • use Advanced Custom Fields Pro to register a `slides` repeater field having slide_image, slide_content, button_text and button_url sub fields
  • output these in a Code Block element inside an section of Oxygen
  • load and initialize responsive Owl jQuery carousel on the code block
  • add CSS to style the slider arrows, CTA button etc.

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 and owl.theme.default.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 slider is to be shown (homepage in this example), register a custom size for images in the slider and enable ACF settings page.

Edit plugin's plugin.php file.

Replace the code inside custom_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 $499 one-time).

Already a member? Log in below or here.

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