The use of image sliders and hero images has become ubiquitous in web design. If you think of your three favorite websites, it’s likely that at least one features a large image slider front and center on their home page.
When it comes to adding one of these sliders to your own website in WordPress, you have a few options. Let’s take a look at what you may want in an image slider, and what solutions are available.
What Do You Need in a WordPress Image Slider?
The early days of image sliders held close to their namesake—the old-fashioned slideshow—with a single image on each slide. Over time, these image sliders have become increasingly complex—with some plugin solutions offering their own fully fledged visual editors.
Before we take a look at what solutions exist, here are some questions to help you figure out what your project needs:
- Does your slider need to support just images? Or will it need video, too?
- How complex do you want the layering to be on your slider? Just an image, an image with text on top, or several layers pieced together to make each slide?
- Do you need dynamic content to be integrated into your slider?
- How much time can you put into maintaining and updating the content in your slider?
- How comfortable are you when it comes to coding your own solutions?
- What price range do you have in mind?
Once you have some quick answers jotted down for those questions, let’s move on to the solutions that are out there.
Free WordPress Image Slider Plugins
Our first round of image slider options is made up of free plugins. If you’re looking for an inexpensive and easy-to-use solution, these will be right up your alley. Free plugins tend to have smaller feature sets than premium ones, so if you need something more complex for your site, they might not be the best choice.
Here are some of the top contenders when it comes to free image slider plugins for WordPress:
This simple slider comes responsive out of the box and can be inserted into your site through a shortcode or widget. The free version of WP 1 Slider supports an unlimited number of images, as well as the ability to overlay text and images. If you’re looking to add videos, however, WP 1 only has that available in the premium version.
One of the most customizable free image sliders out there, Responsive Slider gives access to a drag-and-drop editor for putting together complex slides. The free version can handle images, videos, and text. One of the features that stand out against the other free options is the ability to handle post and WooCommerce objects within the slider, adding the ability to dynamically update your sliders.
Another great image slider plugin, Slider boasts a stellar reputation. On the WordPress plugin repository, it currently has more than 600 five-star reviews and 80,000 active installations. Like most of the plugins on this list, Slider lets you display images, text, and buttons easily. It also features a drag-and-drop editor that comes with multiple templates so that you can get your slider looking good quickly.
Paid WordPress Image Slider Plugins
The free sliders we covered are solid, but simple. If you’re looking for a wider feature set, here are some paid image sliders with all the bells and whistles. Each of these plugins comes with thousands of five-star reviews, plugin support, and a wide array of features that pay for themselves.
Slider Revolution is the number one selling slider plugin for WordPress, and for good reason. It covers all the basics you’d expect, allowing you to build image sliders quickly and easily. Where it really excels, however, is its top-notch visual editor. This beast comes with a number of features that aren’t available in most other plugins.
The template library is for people looking to reduce the amount of coding. With dozens of skins and designs available right away, you can get the perfect slider set up with minimal effort on your end. On top of its available templates, Slider Revolution also features an object library, letting you drop more than just images into your slider. Its capabilities include handling for video, media galleries, social feeds, and more.
When it comes to presentation, there are also a number of animations available to users, including one that mimics the ever-popular whiteboard videos seen online. Finally, a robust user admin gives you access to finer controls. Some of these include the order that slides load in, the use of lazy loading, and more options that help keep your slider loading quickly.
If you aren’t sold yet, we actually have an entire post on why you should be using Slider Revolution.
Another great paid image slider, the LayerSlider plugin covers almost everything you would need. Its visual editor is easy to use, with a variety of templates available to give you a quick start when creating your own image sliders. While there are fewer types of objects supported than other paid sliders, it provides an extensive animation library that can create some stunning layouts.
Want more options? Check out our top WordPress Slider picks from 2018.
Building Your Own Image Slider in WordPress
We’ve taken a look at some phenomenal image sliders for WordPress, but what if you need even more customization, unique features, or performance guarantees? That’s where building your own slider comes in.
Creating a High-Performance Image Slider
The basic idea behind a fully HTML and CSS slider is to load your slides off-screen, then use CSS animation keyframes to create a rotation effect. For code specifics, there are some great examples on this Stack Overflow thread.
Building an Image Slider for Interaction and Experience
jQuery is one of the most popular for this, with a variety of capabilities that make it easy to get the skeleton of your slider up in just a few minutes.
To give this method a try, take a look at our tutorial on building a jQuery slider to see how to put one together step by step (source code included!).
How Do You Create Your Image Sliders?
We’ve covered a handful of the best ways to create an image slider for your WordPress site, but there are many more out there. How do you add image sliders to your own site? Is there a favorite plugin or library that you use? Let us know in the comments below!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post