How to display ACF Pro Repeater’s sub fields as a responsive carousel using Swiper

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 1

Install and activate ACF Pro, Advanced Custom Fields: Font Awesome and My Custom Functionality plugins.

Step 2

Go to Custom Fields > Add New and add a field group titled say, "Page Meta".

Add a services Repeater field having your sub fields.

Here (mirror) is an export file that you could import.

Make sure the image sub 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 3

Create/edit a Page, scroll down to Page Meta section and add as many rows as you want.

Step 4

Let'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/css directory and swiper.min.js to assets/js directory.

Edit plugin.php and add the following inside custom_enqueue_files() function: