How to Create a Multi-Image WordPress Slider for Free
If you are a photographer, a Tripadvisor, a host, or an event management company, your obsession with photographs does not just end in capturing them.
Your need of displaying them on most parts of your website compels you to use any dynamic way of portraying them without losing on the SEO.
There are photo galleries, but displaying galleries on the home page just under the sticky header of your website does not work well because of the limited space you have that you can show your visitors.
In WordPress, this is when the usage of sliders with multiple images comes into the picture. This slider is one of the plugins like the Essential Grid, that can display the images one after the other in a loop with great transitions or animations.
In addition to that, you can add text sliders too with this as captions or as testimonials. The users can visit the WordPress website and get a feel of this right on the front page of the website.
What is a Slider?
A slider is an extension of a banner image that keeps looping one after the other in a linear fashion. The slider is also called a carousel that can accommodate any kind of media keeping the website visitor engaged.
However, there are several types of stunning modern homepage slider designs that include the following:
- Text
- Image
- Video
- Testimonial (Read here more about how to create a testimonial slider here)
- Animated (You can read this article about the transitions)
What is the Purpose of a Slider?
The sole purpose of a slider is to engage the audience, which in our case is the visitor of the website. The more time your visitor spends on your website, the better your website is for search engines.
To keep your visitor glued to your website, these two fundamental things help.
User Interface
This defines how a user interacts with the website. It does not just revolve around the cosmetics of the website, but even stresses on navigation aspect of the website. This contributes to the retention of the visitors.
Content
This is the most important part of a website as this is what brings the visitors to your website. Writing the right articles will attract more and more visitors. This contributes to the increase in traffic to your website.
What is an Image Slider?
One of the types of sliders consists mainly of images that keep looping, of course, with animations and transitions, getting the visitors glued to the page for a long time.
This, in modern days, have to be responsive in the sense that every device available out there should display its content efficiently. The sliders will have to adjust to the screen size while they display to their full potential.
How does a Slider Work in WordPress?
Creating a slider from scratch is not an easy task. It involves learning a lot of technology, mainly JavaScript, and CSS. But this is way easier than you think when it comes to WordPress.
In WordPress, all you need to do to create a slider is to install a plugin and activate it. Once you are done you are ready to create a Slider. We prefer the plugin Depicter over any other plugin as this is free and has endless features.
How can I create a slider?
Once you are done with installing the Depicter plugin, you can start using it by clicking on its navigation link available on the left sidebar of the admin dashboard.
Clicking on the link you will be redirected to a page where you can start creating a slider. In this article we will be creating a multiple image slider with thumbnails using the free professional depicter plugin.
The next window will ask if you want to create a slider from scratch or use an already existing template. Select to create a blank slider as we will now be creating a custom multiple image slider with thumbnails.
Note that we have changed the slider name for our reference and we are good to start to create the multiple image slider with thumbnails.
From the page where you are in, you can select an image from the sidebar to your left and add them to the white rectangular box which is essentially the slider without media.
The image should be expanded to fullscreen and you are done with the first slide. Now you will have to create the second slide. To do this, you need to click on the three dots beside the name of the slide and click on duplicate.
Now, even the second slide will contain the exact same thing that the first slide contains as we just duplicated the slide. So, delete the photo and add your own custom photos from your computer.
To do this you need to click on My Photos from the right sidebar and select one of the images that you can see there.
Scale the image to fit into the slide again. Similarly start doing the same thing until you add the required number of slides into the depicter slider holder. The image slider is ready.
What is a Slider Control and How to Add it to the Slider?
Slider control is a set of controls that you can add to the slider to navigate to the next and previous slides. This will add user interactivity to the slider. These are also called navigation controls.
If you want to add navigation controls to it, you need to go to the navigation control link from the left sidebar and select your favorite control.
This will directly get added to the right place. You can start navigating just by clicking on the icons in the preview.
How to Add Thumbnails to the Multiple Image Slider?
Now, let us start adding thumbnails so that when you click on the thumnails, you will go to the slide that you clicked.
For this you need to add the same images again in all the sliders at the top or bottom or which ever place you think is good for your visitors. They have to be of course small in size.
You need to add the images, resize them and place them in that particular place by dragging and dropping.
Now you have three thumbnails for three sliders. There is one more final step where you have to enable the link to go to a particular slide when clicked on the corresponding thumbnail.
To do this you need to click on each of the thumbnail and go to action tab from the right sidebar.
Select Go To Slide, Click in the next dropdown and click on Add Action.
This adds an action in the bottom that you have to edit and enter the slide number, which looks as follows:
Follow the same steps for all the thumbnails and now you have a slider with multiple images that has thumbnails taking you to the right slider when clicked.
