Image Carousel Thumbnail Slider with ACF Gallery Field in WordPress

February 3, 2020 -

Here is a guide on how to make an image carousel thumbnail slider with ACF in WordPress using the ACF gallery field.

Lightslider, a lightweight image slider seems to fit the bill perfectly – I need it to just display simple thumbnails below the main image which on click/touch show the image in the main slide frame.

The WordPress post or custom post type (CPT) has an ACF Gallery field assigned and whatever the user uploads images I want those images to display in the carousel slider – so an ACF mini loop of images needs to be coded for the images that belong to that particular post.

ACF Set Up

So in the ACF set up just create a gallery field and assign it to a post type, you can also set a restricted number of images if so desired, above I have that set to 5.

Set up Lightslider for WordPress use

Download the latest version of Lightslider and file the following in your WordPress Child Theme…

css/lightslider.min.js
js/lightslider.min.css
img/controls.png

Then set up the scripts and styles in functions.php

Initialise Lightslider

Then add a jQuery init file to fire the Lightslider on page load – also file it in the Child Theme…

js/lightslider-init.js

The CSS selector we need to target the images with is .image-gallery – there are a few other parameters in the init file to get the carousel going as a thumbnail slider – there are a shirt load more options you can check out on the Lightslider page.

Build the ACF Gallery Loop

For the ACF gallery field code you can either add it in directly to a PHP template or via a shortcode or an action – here are 2 ways via code direct php template/action or a shortcode.

Template/Function

or…

Shortcode

In both examples the code is basically the same, how the thumbs show is via the ‘data-thumb‘ attribute – if you want just navigational dots just remove the attribute and value. Also the image itself is wrapped in a link tag linked to the original image – I am doing this as I want it to open in a light box if clicked – if you don’t want this behaviour then just remove the surrounding link tags from the img element.

There is a lightbox overlay example in the references below using magnificPopup. Here is a supplement post on adding magnificPopup to the slider.

Live site example here – demo below.