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.
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
itemhaving 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
- 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.
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
In the same location create a file named, say,
slick-init.js having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.