Soliloquy Blog

WordPress slider tips, Tutorials and Resources.

How to Add a Navigation Bar to a Slider in WordPress

by Waseem Abbas on December 11, 2017

Do you want to display navigation control bar on your slider? Sometimes you may need to create professional image sliders with controls for your users. In this tutorial, we will share how to add a navigation bar to a slider in WordPress.

Since there is no option in WordPress to add an image slider, we recommend you to use a plugin like Soliloquy. It comes with tons of amazing features that allow you to create a slider of your need.

To add a navigation bar to a slider in WordPress, you’ll need to follow these 4 steps:

  • Step 1. Install and activate the Soliloquy slider plugin
  • Step 2. Create an image slider on your WordPress website
  • Step 3. Edit settings to add a navigation bar to a slider
  • Step 4. Display the image slider in WordPress page/post

By the end of this tutorial, you’ll be able to create an image slider with the navigation bar that will look like as shown in this below:

Add a Navigation Bar to a Slider

Ready to get started? Let’s go!

Step 1: Install and Activate the Soliloquy Slider Plugin

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

Soliloquy website

Wondering how to install it? You should check out this complete Soliloquy installation guide for assistance.

Step 2: Create an Image Slider on Your WordPress Website

Upon activating the plugin, you should go to Soliloquy » Add New from your WordPress admin backend to create a new slider. Simply add the title and drop the photos in the Native Slider section.

Add New Slider

To learn about the basic sliders, you should check out this complete guide on how to create an image slider in WordPress.

Step 3: Edit Settings to Add a Navigation Bar to a Slider

Now you should scroll down to Slider tab and modify the images one by one. Click on the pencil icon on each slide to edit it.

Modify Image Slider

It will open the slide in a lightbox and allow you to add the metadata information. In the Caption field, you should add a short description for this image.

Add Caption

Hit the Save Metadata button below all the metadata fields. You need to modify all the slides and add the captions to display a navigation bar on this slider.

Next you should go to Config tab and check mark Show Slider Control Nav option to add the navigation to the bar.

Show Nav Control Bar

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

Copy Shortcode

You’ll need this shortcode in the next step.

Step 4: Display the Image Slider in WordPress Page/Post

To display the slider, you should go to Pages/Posts » Add New or edit an existing WordPress page/post. In the visual editor, simply paste the shortcode.

Paste Shortcode

Make sure to click on the Publish/Update button. You can visit your site to see the image slider with navigation bar that will look like as shown in this image below:

Add a Navigation Bar to a Slider

That’s all! We hope this tutorial has helped you to learn how to add a navigation bar to a 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 loading slow, you should check out this ultimate guide to boost speed and performance.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress tips, 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.

[i]
[i]