Slick is a nifty jquery plugin that makes spiffy (yes I said spiffy) sliders, combined with Advanced Custom Fields Pro gallery field you can make an easy to use client interface to allow them to add images to a slider on a post/page or custom post type.
The example slider in this tutorial will use the Slider Syncing Layout. – I have another tutorial that covers the Multiple Layout.
Getting Slick in order
Move into your CSS directory – slick.css, slick-theme.css, fonts, ajax-loader.gif
Move into your JS directory – slick.min.js
Create a slick-init.js file and also file in JS directory and add in…
Enqueue the Styles and Scripts in WordPress
In your functions.php file add in…
Creating the Gallery Field in ACF
In ACF Pro’s custom fields, create a field label and name and set the type to Gallery as a minimum, there are some other fields you can set.
Then set the location where the fields should show up, above I am setting it to a custom post type.
Adding the Images
Now in your custom post type, post or page add in your images.
Output the Slider Code
So for any WordPress theme add to your template…
or to hook into a Genesis theme by adding in functions.php
Doing it with a Repeater Field (just for kicks)
You could also do the same thing using the ACF repeater field, set up a field make it a repeater and set the sub-field to an image and you the code to below to output it.
That’s it – to change the slider behaviour there are many layout and setting options that you can alter in the slick-init.js file – documentation on the Slick site.