Sliders have become one of the staples in modern web design; it’s a versatile element that can be used to add a focal point to a page, display popular site information or even drop in multiple calls to action in the same spot. Sliders have been around for years and have evolve alongside HTML5 and CSS3 to deliver rich content that was previously only possible using Flash animation.
I thought we could take a look at couple of the more popular slider plugins out in the WordPress community. First off let’s check out Revolution Slider (or Revslider) by Theme Punch, this plugin had a bit controversy last year when hacker group Soaksoak.ru used an exploit in the plugin to infect sites using earlier versions of the slider, to Theme Punch’s credit the security was patched very quickly, and it was mainly due to users not updating their plugins that sites continued to feel the hit from the exploit.
Although Revslider isn’t without its flaws, it is one of the more versatile sliders out there; it uses HTML5 canvas and CSS animations along with some JavaScript to deliver rich content including images, video and text content on multiple layers per slide. Unlike Flash, the slides retain the HTML from the content making it very SEO friendly. Every layer on a slide can also be animated with CSS animation code easily accessible through plugin controls, no coding required. Each slider is almost ridiculously customizable as well, allowing site owners to tailor to the look to match the rest of their theme.
All of this customization does come with a price though, the number of setting and options can make the first time user a bit cross-eyed and setting up a slider can take some time. My advice for anyone using this slider is to sit down and come up with your slide stack first, either on paper, PowerPoint or Photoshop and then move into WordPress and use the plugin. Writing your CSS styles out on local page may be a good idea as well (and has an added benefit I’ll explain in a bit)
The other issue I have with Revslider is page bloat, like many plugins, the Revolution slider writes all of its CSS styles (including animations) directly onto the page. Although I can see the benefit that the code is only written to the page it’s used on but I would prefer if it wrote to an external stylesheet, this would load up in parallel to the page instead of another render-blocking element to the page, my way around this was to write out my text styles to an external file and use CSS classes to mark up the content in the slider.
Revslider doesn’t have a free version though so trying it out will cost you about 18USD from Codecanyon.net, the upside is that there’s no “Pro” version so have you all of the functionality up front. Developers can contact Theme Punch about adding the slider to their own theme; this requires paying Theme Punch a royalty for each theme sold. But for intermediate to advanced users this is one solid plugin for rich media, definitely one to check out.
Next week we’ll take a look at LayerSlider by Kreatura.