How to Add a Navigation Bar to a Slider in WordPress
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:
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.
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.
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.
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.
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.
Once you are done with all the settings, go ahead and hit the Publish button and copy the shortcode from Soliloquy Slider Code widget.
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.
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:
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.
Related Posts
