Viewing high-res images and larger graphics files no longer freeze screens as they once did. That's thanks to the rapid rise in high-speed internet and powerful devices. It's also why site owners want to know how to add a smooth WordPress slider to their blogs and websites.
That's what this guide is all about. But first, let's look at slider options and applications.
Who Benefits from WP Sliders?
In tech-talk, a slider is an online or web-based slideshow. Any WordPress blog or website can have one of these installed. They're most popular on travel, portfolio, and business type websites to showcase collections of images. Sliders are ideal for displaying the site owner's best photos in an eye-catching presentation above the fold.
Other reasons for considering web sliders include:
- Consolidated web content saves space and reduces vertical scroll
- Makes viewing a collection of images easy on the eyes for visitors
- Visually pleasing sliders and carousels encourage visitor interaction
- Eye-catching sliders keep visitors on your page(s) for longer
Not everyone's a fan of WordPress sliders, so let's run over some potential drawbacks.
Web Slider Disadvantages
Many sliders are not novice-friendly. Also, overly bloated sliders with too many bells & whistles affect page speed with slower connections.
Likewise, a cheap hosting plan that skimps on shared resources can also influence slider performance. Slide shows can get stuck with older internet-connected mobile devices, though that's less of an issue these days.
There are fewer responsive sliders than the non-responsive options, but that should soon change. Also, some slider controls are impossible to see on smaller devices.
That's why it pays to know who your audience is and the visitor's devices before adding a slider.
Types of WordPress Sliders
There are two types of slider function, i.e., automated and manual.
Auto-sliders smoothly display a new photo at timed intervals set by you. A manual slider requires user interaction, usually by clicking forward and back directional arrows.
Responsive (mobile-friendly) sliders can offer simple swipe actions to navigate through galleries. Non-responsive sliders won't work or work properly on sites using responsive themes.
Parts of a WordPress Slider
A basic slider has a scrollable image gallery with navigational controls. That's ideal for some presentations. The more complex programs have text, buttons, and maybe animations.
Think about what you want before building your slideshow. It needs to be eye-catching but also blends in with the WP theme and please your visitors.
How to Add a Simple Slider in WordPress
Now for the fun part. This tutorial shows you how to add a simple slider in WordPress using a free plugin. There are many options available, but they're not all equal.
Choosing a slider can be overwhelming, especially for newbies. I've looked at the most popular ones—at the time of writing—and gone for the responsive Smart Slider 3 by Nextend.
Smart Slider 3 is super simple to use, unlike some slider plugins. Plus, it easily integrates with Gutenberg, the WordPress Classic Editor, and Elementor.
If you're a raw WordPress novice, read my quick plugins guide for beginners before continuing.
Install then Activate the Smart Slider 3 plugin.
Once activated, go to Smart Slider => Dashboard from your Admin side menu.
The next step is to click New Project from the Smart Slider Dashboard.
You're then asked if you want to create a new slider using the visual editor or a template.
We'll use a template to keep everything simple.
Click Start with a Template.
The templates screens should display the free options by default. If not, click the Free tab.
There were 14 free templates when writing this guide and over 160 premium options.
Click on a few templates to get a live preview of what they look like. The sliders open in a new browser tab and have functional Next and Previous navigation arrows. You can exit the tab once you're done, as the Slider Dashboard remains open in a separate window.
Hover the mouse over a template you'd like to use, then click Import.
The example here gives us 10 slides, but you can add others if you need them.
Adding Additional Slides
To add new slides, simply click the Add Slide box.
Then click Image.
This opens your WordPress Media Library, where you can select a previously uploaded image. Or, you can click the Upload Files tab to get a new one.
It doesn't have to be an image. Creating new slides can start from blank templates, user posts, a static overlay, or a dynamic slide.
OK, let's get back to the default slides.
The great thing about Smart Slider is that it's super easy to customise every slide element. That includes style and content. The editing options available depend on the template you choose.
To edit a slide, hover the mouse over it and click Edit.
A new Edit Window opens.
Typical edit style options include:
- Upload a new background image
- Edit the image Alt and image title text
- Fill mode, i.e., fit, stretch, centre, tile
- Transition and various animation effects
- Others
Typical edit content options include:
- Font family, size, colour, style, alignment
- Slide title
- Description
- Thumbnail
- Link
- Slide duration
- Animation (pro version only).
There's also a responsive section that lets you exclude the slider on various devices. For example, you might want to hide it on smaller smartphones if it causes navigation issues.
Most of the editing options for an individual slide are self-explanatory. And like most editing tools, there are options to undo and redo changes. Advanced users can be even more creative and add CSS styles, but that's nothing for this guide.
We won't go into all the editing options here as they differ between templates. But don't worry; most of your slide editing tools are straightforward.
Clicking different elements on a slide auto-changes the edit options for that element. It could be the background image, titles, main text, buttons, and so on.
Here's how the slide editor interface looks for text and background options.
Remember to click Save when you're done modifying a slide.
The Back–button returns you to the template screen, where you can continue to edit the other slides. The Dashboard link (left) takes you back to the Smart Slider main screen.
Tip: There are additional customisation settings from the active slider screen in the Dashboard. To access these, scroll down and click the General tab.
The options available depend on the template. But they all include Smart Slider 3 PHP code and shortcode; useful if you still use the classic editor.
How to Display the Slider on Your Website
Once you've prepared your slides, it's time to display the new slider on your website. You can easily add it to any post or page using a Gutenberg block.
Go to pages => All Pages.
Click Edit under the title of the page you want to display the slider on. We'll use the static homepage to illustrate, but it can be any page.
You're now at the Guttenberg Editor.
- Decide where you want to show the slider on the page and click the Add Block symbol
- Select Smart Slider 3 from the Add Block pop-up
Tip: Type smart slider into the search box if you don't see it in the add block box.
Click the Select Slider button to view your available sliders.
Select the slider you want, then click the Insert button.
Now all you need to do is hit the Publish button (top right) and view your slider on the live site.
Congratulations! You've successfully created and published a slider on your WordPress site.
You can go back into the Smart Slider dashboard at any time to make further changes.
Closing Notes
Smart Slider 3 is an excellent free WordPress plugin with a premium option. It's also the most novice-friendly. However, it's not the only slider plugin worth consideration.
Four other excellent WP image slider tools you might want to look at are:
Soliloquy, Slide Anything, MetaSlider, and Master Slider.
