I think it’s safe to say that slideshows are a common website feature. Do a quick search on Google and you can find countless plugins, libraries and tutorials on how to create one. However, when it comes to building a slideshow that will be easy for a client to update and maintain, well, that gets a little more tricky. If you are using WordPress as your CMS, you can go with a plugin, but in some cases these plugins come with so many bells and whistles that the learning curve becomes pretty steep. But, with the right tools, you can create a slideshow that looks great, functions well, and most importantly, is very simple for anyone to update.

Getting started with the slideshow

For the purposes of the tutorial, I’m going to assume you are using WordPress. Before you get started there are a few things you are going to need:

Advanced Custom Fields plugin Gallery addon for Advanced Custom Fields Slick slideshow library

The ACF plugin makes it quick and simple to create a whole of host of custom field types that can really extend the functionality of your WordPress site. Additionally, the gallery addon allows you to upload a bunch of images to a custom field and those images can be used however you’d like. Slick is one of my favorite jQuery plugins. It’s lightweight, runs smoothly, is easy to implement, and gives you a range of options when creating your slideshow.

Setting up the Custom Field

First thing you need to do is install ACF and the gallery addon. Once that’s done, you will see that a “Custom Fields” link has been added to your WordPress admin menu.

Once inside, you’ll see that you can add a field group. Click on “Add New” and give your field group a name. Let’s name it “Slideshow Gallery”. Now, you can add your gallery custom field. Click on “Add Field” and enter in a field label. Let’s call it “Gallery”. You’ll notice that after you have entered in a name for your field label, a field name is automatically created. You can change it, or leave it the way it is (you may need to change it if you have multiple fields with similar names). In this case, you can just leave it how it is.

Under the “Field Type” box, select “Gallery”. For now, you can keep the default options that show up as is, but you could change what the preview size of your thumbnails will be if you wanted to, but it’s not necessary.

Now, scroll down to the “Location” box. This is where you can choose where this gallery custom field will show up. In this case, let’s choose to show it on pages only (but you can do whatever fits yours needs). That’s it, now you can hit “Publish”. Now your gallery custom field will show up on any pages you add or edit.

Next, you’ll need to upload some images to the new custom field. Since this is going to be a slideshow rather than a thumbnail gallery (which you could also build using this same process), just put around 5 images in there. Once you’re done, it’ll look something like this (you’ll have different thumbnails, but you know what I mean):

Adding Slick to the Mix

In order for Slick to work properly, you will need to add two dependencies, a CSS file and a Javascript file. If you opt to download Slick and serve up the files yourself, that’s perfectly fine, or you can use a CDN. Drop these two files in to your head.

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

Now that you have the dependencies loaded, you can write the HTML for your slideshow. Slick makes it really easy to create a slideshow out of anything really (images, divs, spans), but for this just use straight images.

<div class="slideshow"> <img src="image1.jpg" /> <img src="image2.jpg" /> <img src="image3.jpg" /> <img src="image4.jpg" /> <img src="image5.jpg" /> </div>

Putting it all Together

Obviously, the above code could work just fine if you are building something static, but you aren’t. You need a way to grab the images you have uploaded to your gallery custom field and place them into Slick’s structure. Luckily, ACF makes this very easy to do. Copy the following code, and place it wherever you want your gallery to appear. Since you currently have your custom field available to all pages, it might be best to put this code in your page.php file (but you could also stick it in your functions.php if you wanted to create a shortcode for example). Also, you’ll want to load the images conditionally, meaning that if there are no images present, the slideshow will not show.

<?php $images = get_field('gallery'); ?> <?php if( $images ): ?> <div class="slideshow"> <?php foreach( $images as $image ): ?> <img src="<?php echo $image['url']; ?>" /> <?php endforeach; ?> </div> <?php endif; ?>

Notice the get_field(‘gallery’) bit? That is where the field name from when you created the custom field comes into play. Make sure that is correct or your images won’t load correctly. Also, the conditional logic is already in place with this function.

There’s one last little bit. You’ll need to initialize the slideshow. Don’t worry, it’s nothing complicated (you’ve already done the hard part). Add this line after the two dependencies you added earlier:

$('.slideshow').slick();

This is the basic initialization for Slick. There are a tons of options available to you with just a little extra coding. Be sure to check out the Slick website to see what you can do.

And that’s it! You have successfully created a slideshow using ACF and Slick. What’s great about this approach is that you can swap images in and out very easily, and what’s more, your clients can do it without becoming overwhelmed with a ton of features they are unsure about or scared to touch.

Here’s an example of the slideshow in action:

Any questions, comments, concerns or complaints? Well, maybe not complaints, but be sure to let me know what you think in the comments below. Also, drop your email in the subscribe box in the sidebar to receive my weekly newsletter with updates about what you missed while you were away.