Image Carousel Thumbnail Slider with ACF Gallery Field in WordPress

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

acf-gallery-slider-image-field

 

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

<?php // <~ don't add me in
add_action( 'wp_enqueue_scripts', 'ls_scripts_styles', 20 );
/**
* LightSlider Scripts
*/
function ls_scripts_styles() {
wp_enqueue_style( 'lightslidercss', get_stylesheet_directory_uri(). '/css/lightslider.min.css' , array(), '1.0.0', 'all' );
wp_enqueue_script( 'lightsliderjs', get_stylesheet_directory_uri() . '/js/lightslider.min.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'lightsliderinit', get_stylesheet_directory_uri() . '/js/lightslider-init.js', array( 'lightsliderjs' ), '1.0.0', true );
}
view raw functions.php hosted with ❤ by GitHub

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.

jQuery(document).ready(function($){
$('.image-gallery').lightSlider({
gallery:true,
item:1,
auto:false,
loop:true,
thumbItem: 9,
});
});
view raw lightslider-init.js hosted with ❤ by GitHub

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

<?php
// ACF Fields
// tl_slide_images = Gallery Field
function themeprefix_lightslider_thumbslider() {
$images = get_field('tl_slide_images'); //add your correct field name
if( $images ): ?>
<ul id="light-slider" class="image-gallery">
<?php foreach( $images as $image ): ?>
<li data-thumb="<?php echo $image['url']; ?>">
<a href=""><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
</li>
<?php endforeach; ?>
</ul>
<?php endif;
}
/*
* Call the function direct or hook in with an action
* themeprefix_lightslider_thumbslider();
*
* /

or…

Shortcode

<?php
// Where you want the slider add the shortcode [lightslider_looper]
add_shortcode( 'lightslider_looper', 'tl_light_looper' );
function tl_light_looper() {
// ACF Custom Fields
// tl_slide_images = Gallery Field
$images = get_field('tl_slide_images');//add your correct field name
ob_start();
if( $images ):
?>
<div class="tl_slide_photo_container">
<ul id="light-slider" class="image-gallery">
<?php foreach( $images as $image ): ?>
<li data-thumb="<?php echo $image['url']; ?>">
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif;
return ob_get_clean();
}

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.

Demo example here – will add one direct to this post in the near future.

ligtslider-carousel

ref-thumbnail mark up

ref-lightbox overlay

4 Comments

  1. Evan Scheingross on October 17, 2018 at 6:49 pm

    Thank you for this write up! It was EXACTLY what I was looking for. Totally worked like a charm. Gonna keep this one in my back pocket.

  2. Phạm Bá Sỹ on August 31, 2018 at 1:55 pm

    Hello! When I test your code on local, images didn’t appear.
    I inspected:

    Tell me how to fix it!
    Thank you!

  3. Silva on March 21, 2018 at 6:43 pm

    Hello I followed the step by step creating everything exactly as in the example. While the slide does not work and the pictures do not appear. I think I may have done something wrong. Well the idea is great =)!

  4. Dawn on February 5, 2018 at 8:12 am

    Great tutorial, finally an image gallery tutorial for the ACF plugin that a beginner could follow. Thank you!

Leave a Comment