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 ($27/month).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • after I add the js in the code block i get this message
    Uncaught Reference Error: Swiper is not defined on line #1

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: