How to create a WordPress image carousel using the new gallery widget

WordPress 4.9 is live a few days now and it comes with an awesome new widget: the Gallery widget! In this mini-tutorial we’ll see how to turn our gallery widgets into image slideshows using Slick carousel and minimal code!

Slick Carousel

The jQuery plugin that’s going to power our carousel is none other than the almighty Slick Carousel, by the man, Ken Wheeler.

Why Slick? Because it’s (in my opinion, at least) the most powerful free and open source carousel jQuery plugin out there; it’s versatile, extremely easy to use (as you’ll soon discover), touch ready, mobile friendly, and comes with an abundance of options. In fact, we like Slick so much here that we’ve adopted it in all our recent (and future) themes.

Getting set up

For this tutorial we’ll be using our own popular Olsen theme which comes with slick carousel enqueued by default, but anything we do applies to all our themes, and generally all WordPress themes.

If you’re not using Olsen (or any of our more recent themes this last year and a half), the first thing to do would be to download Slick carousel from its website. Click on the “get it now” navigation option and hit the download button. Extract the file contents of the zip you’ve just downloaded and transfer the slick folder inside a directory in your theme (e.g. in /assets).

Then, inside your theme’s functions.php file enqueue it:

<?php
// ... inside your enqueue function

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

function my_theme_enqueue_assets() {
	wp_enqueue_style( 'slick', get_template_directory_uri() . '/assets/slick/slick.css', array(), '1.5.7' );
	wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/assets/slick/slick-theme.css', array(), '1.5.7' );

	wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/slick/slick.js', array(), '1.5.7', true );
}
Enqueuing Slick carousel

Of course, make sure your theme also enqueues jQuery.

The new Gallery widget

As I said before (and you’re probably already aware) WordPress 4.9 comes with a nifty Gallery widget. It’s generally very simple to work with, it requires a selection of images from your media uploader and then goes on to output the native WordPress gallery markup which is the same exact one as the native WordPress gallery shortcode we’ve been using for years in any post or page content.

Every theme that respects itself should have styles available for native WordPress gallery support, so you should be able to use the new widget in your website without any updates or additional tinkering. Here’s how it looks in Olsen, for example:

Let’s turn this into a carousel!

The JavaScript

Converting the above gallery into a carousel is extremely simple with Slick carousel. Open your (child) theme’s custom JavaScript file (e.g. scripts.js) and add this line:

jQuery(function($) {
  $('.widget_media_gallery .gallery').slick();
});
Enabling Slick carousel on the Gallery widget

Yup, that’s all it takes!

All Slick really needs to work is the selector of an element containing the images (or slides in general), and in our case it’s the child .gallery element  of each .widget_media_gallery class (which is the Gallery widget’s class).

And here’s how cool it looks in Olsen:

And that’s it! A beautiful image carousel widget with minimal effort! Feel free to try it on any of our themes (or on your own theme), make sure you check out Slick carousel’s settings to customize your widget as you’d like, and let us know in the comments about your results, along with which jQuery plugin you like best for your slideshows!

2 comments

  1. Frode says:

    Nice! Can this be used to populate the stylebook in Hugo?

    1. Vassilis Mastorostergios says:

      Heya, thanks! The “Stylebook” widget is simply the Instagram widget that Hugo supports and already supports a slider :)

Leave a Reply

Your email address will not be published. Required fields are marked *