Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
How to Create a Thumbnail Slider in WordPress

How to Add a Slider with Thumbnails in WordPress

by Courtney Robertson on April 15, 2022

Want to add thumbnail images as your WordPress slider navigation? Does your slider look good on a mobile device?  You can generate responsive thumbnail images as navigation for your slider.  In this tutorial, we’ll show you how to add a slider with thumbnails in WordPress.

With a responsive thumbnail slider, you can:

  1. Determine where to position the thumbnails (above or below) in relation to your slider
  2. Adjust the width of your thumbnails
  3. Set the minimum/maximum number of thumbnails that should be displayed

To create a slider with thumbnails, you’ll need to follow these four simple steps.

  • Step 1. Install and activate the Soliloquy Slider plugin.
  • Step 2. Install the Thumbnail Slider Addon
  • Step 3. Create a Thumbnail Slider
  • Step 4. Add a Slider with Thumbnails to a Page

Step 1. Install and activate the Soliloquy Slider plugin.

First, you 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.

In order to install the Thumbnail Slider addon, make sure your license is verified before you proceed.  Go to Soliloquy » Settings to verify your license key.

Soliloquy Validate License Key

Step 2. Install the Thumbnail Slider Addon

Next, you need to install and activate the Thumbnail Slider addon.  If you do not see it listed, select Refresh Addons.

Activate Thumbnail Slider Addon

Step 3. Create a Thumbnail Slider

Start by creating a thumbnail slider.  Go to Soliloquy » Add New to add a Thumbnail Slider type.  Either select files from your computer or other sources to use images already uploaded in the WordPress media library.  Then save draft or publish.

Add a Slider with Thumbnails in WordPress

After this, scroll down to the slider settings area. Then select the Thumbnails tab at left.

Next, check the box to enable slider thumbnails. From there, you can customize the size and position of the thumbnails, as well as more options.

Thumbnails Slider settings

Remember to save your settings and publish the slider.

Step 4. Add a Slider with Thumbnails to a Page

You’re almost done.  Now it’s time to add your slider to either a post or page if you have not yet done so. Go to a post or page, click Add Slider and select your Thumbnail slider.  Then publish or update your post / page.

Add thumbnail slider to a post in WordPress

Finally, view your thumbnail live on your site.

Thumbnail slider demo

Thumbnails Addon Demo

Check out this beautiful slider with some thumbnail action!

  • action-adult-backlit-433083
  • action-backlit-beach-1046896
  • adult-backlit-child-356188
  • adults-backlit-beach-950047
  • artistic-backlit-creative-532285
  • backlit-beach-clouds-1005198
  • backlit-blur-couple-556667
  • backlit-couple-love-912473
  • beach-clouds-dancing-898220
  • camera-mountains-person-6745

You’re done! You can now create your own thumbnail slider. We hope this tutorial showed you how to add a slider with thumbnails in WordPress. If you need some more creative slider ideas, consider reading these articles.

If you liked this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Courtney Robertson is a content writer for SoliloquyWP. She loves helping customers create the best WordPress sliders.

Comments

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.