Published on Oct 17, 2018

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

Sridhar Katakam
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:

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