This members-only tutorial provides the steps to display sub fields of an Advanced Custom Fields Pro's Repeater field as a responsive carousel using Swiper, a mobile touch slider in Oxygen. We are going to
- add a "Page Meta" field group having a `services` repeater-type field attached to Pages having these sub fields: name, image (Font Awesome icon), details, index, url.
- edit a Page and add 4 or 5 rows of services.
- load Swiper on Pages.
- edit Oxygen's Template for static Pages and add a Code Block having the PHP, CSS and JS to output the sub fields' values formatted for Swiper.
Step 1Install and activate ACF Pro, Advanced Custom Fields: Font Awesome and My Custom Functionality plugins.
Step 2Go to Custom Fields > Add New and add a field group titled say, "Page Meta". Add a
servicesRepeater field having your sub fields. Here (mirror) is an export file that you could import. Make sure the
imagesub field is a "Font Awesome Icon" type field. Set Return Value to Icon Element. Set Enqueue FontAwesome to Yes. Set the field group to appear on Page post type.
Step 3Create/edit a Page, scroll down to Page Meta section and add as many rows as you want.
Step 4Let's load Swiper on static Pages. Connect to your hosting account using a FTP client and navigate to site's wp-content/plugins/my-custom-functionality-master. Upload swiper.min.css to the plugin's
assets/cssdirectory and swiper.min.js to
plugin.phpand add the following inside
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.