Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
Responsive Thumbnail Slider in WordPress

How to Create a Responsive Thumbnail Slider in WordPress

by Waseem Abbas on November 13, 2017

Do you want to add thumbnails to your responsive image sliders? Displaying your beautiful WordPress sliders on mobile devices will help you to target a larger audience. In this tutorial, we will share how to create a responsive thumbnail slider in WordPress.

You may know that there is no default option to create a slider in WordPress. However, a plugin like Soliloquy can help with it. This plugin has all you need to add beautiful and responsive sliders on your website.

To create a responsive thumbnail slider in WordPress, you’ll need to follow these 4 steps:

  • Step 1. Install and activate Soliloquy slider plugin
  • Step 2. Install and activate the Thumbnails addon
  • Step 3. Create a new image slider with responsive settings
  • Step 4. Display the responsive thumbnail slider in WordPress

Ready to get started? Let’s go!

Step 1: Install and Activate Soliloquy Slider Plugin

The first thing you need to do is to install and activate Soliloquy slider plugin on your WordPress website.

Soliloquy website

Don’t know about the installation? Check out this simple guide on how to install Soliloquy in WordPress.

Step 2: Install and Activate the Thumbnails Addon

Once the plugin is activated, simply go to Soliloquy » Addons to install and activate the Thumbnails addon.

To access this addon, you must have Soliloquy’s Developer or Master license. Wondering how to get it? Go ahead and upgrade your license from here.

Thumbnails Addon

After the activation, this addon will add the thumbnails on your image sliders in WordPress.

Step 3: Create a New Image Slider with Responsive Settings

To create a new slider, go to Soliloquy » Add New. In the first field, you should enter the slider title. Drop your slides in the Native Slider section just below the title field.

Add New Slider

Now scroll down to Thumbnails tab and enable the slider thumbnails setting.

Enable Slider

Next you should go to Mobile tab and check mark on Enable Slider Thumbnails. It will enable the slider thumbnail feature on mobile devices.

Enable Slider Thumbnails

For the basic slider settings, you should check out this complete guide on how to create an image slider in WordPress.

Step 4: Display the Responsive Thumbnail Slider in WordPress

When you are done with all the settings, hit the Publish button and copy the shortcode from Soliloquy Slider Code widget.

Copy Shortcode

To display the slider in WordPress posts, go to Posts » Add New or edit an existing post and paste the shortcode in the visual editor. This process is same for the WordPress pages.

Paste Shortcode

Make sure to hit the Publish button. Now visit your website from a mobile device and check out the responsive image slider with thumbnails.

You can change any settings from the Thumbnails tab in your Soliloquy slider.

We hope this tutorial has helped you to learn how to create a responsive thumbnails slider in WordPress. You may also want to check out our guide on how to create a responsive slider for Envira Gallery. In case, your slider images are not ranking in the search engines, check out this ultimate WordPress SEO guide.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress guides and resources.

Waseem Abbas is a content writer for SoliloquyWP and Envira Gallery.

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.