Paste contents of carousel-linked-thumbnails.php into the theme custom.php file
Create ACF repeater field called carousel_images
Create a sub field image - set this to return image ID
If using the Roots framework, add js/_carousel.js to the theme assets/js/vendor directory
If you use a different directory for the js files, remember to reference it properly in enqueue.php
Include jquery.touchSwipe.min.js and touchControl.js in assets/js/vendor for mobile swipe support.
Enqueue the javascript files by adding the contents of enqueue.php to your theme custom.php file, or /lib/scripts.php for the Roots framework
Include the contents of carousel-linked-thumbnails.css in the theme CSS/LESS
Intro ID
This is really two linked carousels:
A full size carousel, populated from an ACF repeater field
A thumbnail sized carousel, populated from the same field
The thumbnail carousel targets the main carousel by means of the Bootstrap data-target attribute. The following code block shows how the carousel with id “myCarousel” is targeted. $count works as a counter, and because both sliders are populated from the same repeater field cross-referencing is easy.
The data attribute data-slide-to is used to pass a raw slide index to myCarousel - it does what it says on the tin. In this case, clicking the thumbnail triggers a slide to the $count slide on the main carousel.
Building the Carousels
The carousel is dynamic - it takes advantage of the Advanced Custom Fields WordPress plugin that allows the user to upload/select images.
An ACF field group is built, and associated with a Custom Post Type (in this case, the CPT “project”).
A repeater field is added - the repeater field is a premium add-on for ACF (it is extremely useful and ridiculously under-priced).
An “image” sub-field is added to the repeater field.
If necessary, extra fields can be added to allow fine user control over what is displayed on each slide.
The image data for each slide is held as a row in the ACF repeater field.
For these files, the repeater field is named carousel_images.
The image sub-field is named image.
The PHP function for building the carousels is in the file carousel-linked-thumbnails.php. The code in this file could be added to the theme custom.php file. View the code here:
When using the Roots framework, add the code to lib/custom.php.
The function can then be used in page templates. In this example, the function is added to the content-single-project.php template part:
Controls
Controls are built into /js/_carousel.js:
WordPress: Enqueue Scripts
When working within WordPress it’s important to enqueue scripts properly - this prevents inefficient double loading of libraries and ensures that scripts load rationally.
Within the Roots framework, the js files could be added to the assets/js folder and named with a leading underscore - they would then be concatenated into scripts.min.js. This isn’t a bad option - but it means that unecessary kilobytes will be added to pages that don’t contain the carousel.
Consider enqueueing the scripts only on the pages where they are required - in this case, the scripts are enqueued only on project CPT pages.
For better efficiency, the raw js files could be targeted by Grunt and uglified.
The enqueue script within the Roots framework are placed in lib/scripts.php in order to keep all script calls rational. In other setups the enqueue function could be added to the custom.php file.
Mobile Swipe Support
I used the touchSwipe jQuery plugin to achieve swipe support for mobile devices. This plugin is copyright (c) 2010 Matt Bryson and is dual licensed under the MIT or GPL Version 2 licenses.
I plan to build in conditional logic so that touchSwipe is only loaded for mobile devices.