How to Add a Slider with Thumbnails in WordPress

by Courtney Robertson on April 15, 2022 | Reader Disclosure

Do you want to add thumbnail images as navigation for your WordPress slider? Dots and arrows don’t tell visitors what’s coming next, so most of them never click past the first slide. A row of thumbnails shows every slide at a glance. In this tutorial, we’ll show you how to add a slider with thumbnails in WordPress.

We’ll use Soliloquy’s Thumbnails Addon, which adds responsive thumbnail navigation to any slider. With it, you can:

Choose where the thumbnails sit, above or below your slider
Adjust the size of your thumbnails
Set the minimum and maximum number of thumbnails to display
Turn thumbnails on or off for mobile visitors

To create a slider with thumbnails, you’ll need to follow these 4 steps:

Step 1. Install and activate Soliloquy
Step 2. Install the Thumbnails Addon
Step 3. Create a slider and enable thumbnails
Step 4. Add your slider with thumbnails to a page

Ready to get started? Let’s go!

Step 1: Install and Activate Soliloquy

First, you’ll need to install and activate the Soliloquy slider plugin. For more details, see this step-by-step guide on how to install a plugin in WordPress.

Before you can install the Thumbnails Addon, your license needs to be verified. Go to Soliloquy » Settings and enter your license key.

Step 2: Install the Thumbnails Addon

Next, go to Soliloquy » Addons and install and activate the Thumbnails Addon. If you don’t see it listed, click Refresh Addons.

The Thumbnails Addon is included with the Developer plan or higher, so it won’t appear on lower-tier licenses.

Step 3: Create a Slider and Enable Thumbnails

Now go to Soliloquy » Add New to create your slider. Select files from your computer, or choose images already in your WordPress media library.

Then scroll down to the slider settings and select the Thumbnails tab on the left.

Check the box for Enable Slider Thumbnails? From there, you can customize the size and position of the thumbnails, along with the other thumbnail options.

Before you publish, open the Mobile tab too. There’s a separate option there to show or hide thumbnails on phones, which is handy if the row gets cramped on small screens.

Pro Tip: Thumbnails work best when your slides look different from each other at a small size. If several slides are similar photos, adding captions helps visitors tell them apart.

When you’re happy with the settings, click Publish.

Step 4: Add Your Slider with Thumbnails to a Page

You’re almost done! Copy the shortcode from the Soliloquy Slider Code widget, then edit the post or page where you want your slider and paste it in. Publish or update the page to save your changes.

Finally, view the page on your site to see your thumbnail navigation live.

For more ways to place your slider, see our guide on adding a WordPress slider with a shortcode.

Thumbnails Addon Demo

Check out this slider with thumbnail navigation in action:

Want to see more layouts? Take a look at our slider with thumbnails demo.

FAQs About WordPress Thumbnail Sliders

What is a thumbnail slider?

A thumbnail slider is an image slider with small preview images, usually below or above the main slide. Visitors click a thumbnail to jump straight to that slide instead of clicking through them one at a time.

How do I add thumbnails to a slider in WordPress?

With Soliloquy, install the Thumbnails Addon, then open your slider’s Thumbnails tab and check Enable Slider Thumbnails. You can then set the thumbnail size, position, and number before publishing.

Can I hide slider thumbnails on mobile?

Yes. Soliloquy’s Mobile tab has its own option to turn slider thumbnails on or off, so you can keep them on desktop and hide them on small screens.

You’re done! We hope this tutorial showed you how to add a slider with thumbnails in WordPress. If you’d like more ways to customize your slider navigation, check out these beginner-friendly guides: