How to display ACF Repeater items in a carousel using SlickJS

In the members-only forum, a user asked:

I'm wanting to build a site similar to this http://kevita.com/products/master-brew-kombucha/ with a full width top image and slider below with product info using advanced custom fields and slick or soliloquy.

Thank you!

In this tutorial, I would like to share a custom Page Template that outputs rows of a Advanced Custom Fields' Repeater field (entered in a Page using that template) as a pair of carousels using Slick's Slider Syncing.

We are going to

• create a generic ACF Repeater field (Pro version of the plugin is needed) called item having 3 sub fields: title, image and info.
• In a function hooked to genesis_entry_content, write two for loops - the top one to retrieve the item image & item title and the bottom one to retrieve item info using WordPress's native get_post_meta() instead of ACF's for improved performance.
• load and inititialize Slick on the divs output by the two loops - the top one to show 5 items at a time on desktops, 3 at a time at 1200px and below, 1 at a time from 768px and below; the bottom one to show 1 item. The two carousels will be in sync using asNavFor property.
• set the opacity of the carousels to 0 in CSS and to 1 via jQuery after the Slick sliders have been initialized and the DOM loaded to prevent FOUT (Flash Of Unstyled Text).
• use Font Awesome for the left and right arrows in the items carousel.

This solution can be used for other use cases like showing testimonials or products.

Step 1

a) Create a css directory (if not present) inside your child theme directory and upload slick.css.

b) Upload slick.min.js to child theme's js directory.

In the same location create a file named, say, slick-init.js having the following: