Published on Sep 12, 2018
Custom slider in Oxygen using ACF and Owl carousel
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.
- 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.
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.
Install and activate ACF Pro.
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.
Replace the code inside
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.