Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress
Code

Best Ways to Create an Image Slider for WordPress

by
Length:ShortLanguages:

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:

WP 1 Slider

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.

Responsive Slider by MotoPress

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.

Responsive Slider by MotoPress
Responsive Slider by MotoPress

Slider by Soliloquy

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.

Slider by Soliloquy
Slider by Soliloquy

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 Responsive WordPress Plugin 

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.

Slider Revolution
Slider Revolution

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.

LayerSlider Responsive WordPress Slider Plugin

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.

LayerSlider plugin
LayerSlider

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

When it comes to performance, including extra JavaScript libraries or too much JavaScript can really slow down your site. If you’re trying to create an image slider with a small footprint, but without anything too fancy, HTML5 and CSS3 can be a good place to start.

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.

For people looking to get the performance boosts that come with using sliders with little to no JavaScript, there are also a number of HTML5-based image sliders available.

Building an Image Slider for Interaction and Experience

The HTML5-based image slider looks great, but its functionality is a bit limited. For people looking for a number of features to add to their WordPress site, using a popular JavaScript library is the way to go.

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.