I rarely write plugin reviews, and I never write about sliders. But today I’m making an exception for Smart Slider 3.

It’s not just the best slider plugin available, it’s also an example to all free and premium plugin makers of how a plugin should be made.

So let’s take a look at why I think Smart Slider 3 is fantastic.

Note: This is not a paid review. I genuinely liked the plugin so much I wanted to share why with you. There’s a free version of Smart Slider available, which offers more features than most premium plugins, so if you’re just interested in the free version read on – I’ll let you know when I get to the paid features.

The Good

  • Amazing interface
  • Free version contains plenty of features
  • Easy to work with
  • Smooth admin experience

The Bad

  • Backspace could work to delete elements
  • Layer animations have a learning curve

WPMU DEV Verdict

  • Price:
  • Quality & Usability:
  • Performance:
  • Beauty & Modernity:
  • Overall:

WPMU DEV Rating

The Bottom Line

This is hands down one of the best plugins available right now. A well-thought out user interface coupled with all the functionality you need when making sliders make this the go-to slider plugin for WordPress.

I had to really think about writing bad things – most of them are just enhancements that would make this plugin even better!

What is Smart Slider 3?

Smart Slider 3 is a plugin you can use to create sliders and place them anywhere on your website. You can put together anything you want with its powerful builder interface, fine-tuned animations between slides and – with the pro version – create layer item animations to get things moving within sliders.

I’ve seen plugins that can do this before, but not like this. Smart Slider looks and feels like Sketch 3. When I started using Sketch instead of Photoshop, my feeling was: “Why has this not been done before?!” Smart Slider brings the interface and ease of use of Sketch (layers, property inspector, previews) to slider creation.

The slide editing interface
The slide editing interface

A Bit About Sliders

Before we delve deeper into the plugin, I have to lay the groundwork: I hate sliders.

I hate them in the same way some people hate baby photos, food photos or selfies: There’s nothing wrong with taking these photos, but the constant onslaught of them can be overwhelming.

There has been a lot of research into sliders and how they are detrimental to conversions and SEO. I think the biggest problem is that almost all premium themes have a slider on the front page. It is great eye candy so when someone buys a theme they just start using it without thinking, which is a problem because there is only one thing worse than an unnecessary slider, and that’s a badly made slider.

I think that low-quality sliders are a big contributor to lower conversions. I’ve noticed in my own browsing behavior that I have stayed longer on a website to view the contents of a visually striking slider.

In the end, I have to admit that I think sliders do have their place. If you use them smartly (no pun intended) they can be a valuable asset to your site. If you use them poorly, however, they will lower your conversions and hurt you SEO – just like any other element on your page.

In addition, Smart Slider allows you to create visuals that aren’t slides You can create a single slide slider with animations, allowing you to create elements that look like static images with small subtle animations to catch a visitor’s eye.

A Bit About Premium Plugins

Now that I’ve vented most of my anger at sliders, let me release the leftovers on premium plugins.

I’ve noticed that a lot of available premium plugins are simply not good – not when you take into account people are making money with them. This is especially true for a plugin that tackles extremely difficult UI concepts like sliders.

Plugin authors seemingly tend to not care about user experience and all they want is a quick buck. When you buy a premium app like Evernote or Sketch, you expect the interface and additional features (like the help system, settings management, etc.) to be just as polished as the rest of the product – you expect quality.

Smart Slider delivers on this as well. From the initial introduction video to the website, its icon, its templates, help system and general user interface, you can see that someone sat down and thought about it all and applied the spit and polish needed to make a proper product, as opposed to something that looks like your neighbor put it together yesterday.

Creating a Slider

Initially, you’ll be greeted with your sliders on the left and helpful resources on the right. This screen already shows the attention to detail I like about this plugin. You can order your sliders by name or by creation date. You can also choose a bunch of handy little actions on the right but the main action is a lot larger and more noticeable with a pleasant design.

Note how all of the action buttons that you use to add a slider are green, secondary importance action buttons are blue, and the rest are grey. Very intuitive.

The initial view
The initial view

Adding a Sample Slider

If you have the free version you’ll have access to four free sliders. If you have the pro version you’ll get access to a library of 100+ pre-built sliders, which can give you a great starting point.

Sample Sliders
Some sample sliders

Sliders From Scratch

If you want to start a new project you start by selecting a template. Free users have access to four while pro users have 11 at their disposal.

Create a slider
Create a slider

Once created, you can get started by setting general options and adding slides. You’ll probably want to fiddle around with general settings initially and then modify them as needed once you’ve created some sliders.

Slider Options

Two tabbed sections give you access to a wealth of options. The first section sets actual settings, the second section focuses on visuals.

The first section allows you to change general settings, size, autoplay, layer animation, optimization, advanced and other settings.

Smart Slider General Settings
Smart Slider General Settings

The second section gives you control over the UI elements created by the slider. Arrows, bullets, autoplay controls, thumbnails, shadows and more.

Smart Slider Visual Settings
Smart Slider visual settings

Slide Setup

Most of your time will be spent within the slide editor assembling your slide. While Smart Slider is responsive the interface is best at high resolutions. Your layers will be listed on the left.

Hover over any layer to see it highlighted in the preview area. Click on a layer to bring up its details in the panel below where you’ll be able to modify the item details, animations (for pro users) and layer settings.

You can use the visual editor to reposition the layer by dragging and dropping. You can – of course – achieve the same result using the positioning options in the layer tab. Another little detail: Undoing with cmd + z works just fine – a nice touch.

To add a new element, just click the buttons at the top. Free users can choose from six elements: Image, heading, text, button, Vimeo and Youtube. Pro users have an additional nine elements to choose from: List, icon, caption, transition, iframe, video, HTML and area.

The Slide Editor
The Slide Editor

Clicking on an element will add it to the layer list and the preview. Start editing right away and see everything in real-time in the preview. Each element has a bunch of further options you can tweak to your heart’s content. This is another area where Smart Slider shines. Take a look at the font settings for an element:

Font Settings
Font Settings

Not only can you set colors, line heights, spacing and other items, you can preview it right there, add extra CSS and choose from presets on the right. You can even save your settings as a new preset, which will minimize the time you need to spend on your elements if you have a bunch of similar ones.

Above the preview area you can find settings for the slide itself. A name, description and link can be set, in addition to background, animation and other options.

The preview area itself has some handy controls. You can turn snapping on/off, display a dark backdrop, set alignments, hide layers and more. Even more useful are the controls to view your slide in desktop, tablet and mobile view. By the way, right-click on any element in the preview to delete/copy/duplicate the layer.

Animating Layers

The pro version gives you advanced animation options to get your layers moving. The result is best displayed on one of the sliders on the Smart Slider home page.

Smart Slider Animations
Smart Slider animations

When creating animations you can set in/out/loop animations and handle events like click, mouse enter, mouse leave, play and more. You can place your animations on a timeline that supports dragging and dropping.

This essentially turns Smart Slider into something similar to a video editor. The process is essentially the same, you place events on a timeline which tells you when an event starts, how long it takes and when it ends.

Animating layers is a complex process but Smart Sliders UI makes it a smooth and enjoyable process.

Animation Timeline
Animation Timeline

Once done, each slider can be inserted via a shortcode, using the Smart Slider icon in the post editor or using PHP code. You’ll see everything you need to use these above the general options in the slider.

Why Smart Slider Is So Great

Smart Slider is now in my top three favorite plugins. Big call, but it is the best example of what a premium plugin should look like.

It has a user interface that has obviously been split tested and informed by user input. Elements like checkboxes, radio buttons, selectors and other fields don’t seem out of place; the whole experience is fluid and unified.

The pro activation process is extremely simple. You don’t even need to go to a special activation page. I first bumped into the need for activation when I wanted to import a test slider. I got a little window telling me what’s what with a text field right there. I pasted the code, pressed “OK” and it was activated and I was taken to the test sliders.

Another amazing aspect of the plugin is how fast its JavaScript is. In saying that, creating JavaScript that lets you handle everything from slider creation to animation, display it and live preview it is complex is a gross understatement. Ensuring that user interactions in the admin and slide display in the front-end is nothing short of a miracle.

Wrapping Up

Smart Slider is what I want all plugins to be, and what I think all plugins should aspire to be. Would you be OK with the Airbnb application or Evernote being sub-par just because it was free? I know I wouldn’t. It seems, finally, WordPress plugin development is reaching the quality that desktop and mobile applications have spoiled us with.

If you need to create sliders or want a single image with subtle animations on your website Smart Slider 3 provides the solution, no matter what you want to accomplish. I can heartily recommend the free version. It already provides more functionality than any other slider plugin – even many premium ones.

If you need the power of the pro version or want to support the development of amazing software take a look a the pro version, you won’t be disappointed.

View @ WPMU DEV

Leave a Reply