Remember Flash? Yuck.
A few years ago Steve Jobs decided that it was time to take a stand against Adobe and their proprietary software Flash. Steve turned a lot of heads and started a ton of heated debates when he flat out refused to support Flash in the iPhone. Some people thought it was only a matter of time before Apple “had” to support Flash because really there is no way that we will be able to produce the same animation effects with javascript/jQuery, etc. That turned out to be incorrect. Since Apple products were so popular website developers had to come up with different solutions for their animations. In my opinion Steve’s decision is a major reason jQuery and HTML5 has progressed so much in the last few years.
Fastforward a couple years…
Introducing The Revolution Slider
I recently launched a responsive WordPress theme called “Hipster” at ThemeForest. The theme has the WOW Slider built in but I decided to give an extra slider option for people purchasing the theme, and decided on The Revolution Slider. I had seen the slider around over the last few months but never had a chance to use it. Last weekend I started creating the demos for the theme homepage with the new slider built in, and all I can say is WOW. I can honestly say that I haven’t had as much fun with, or been blown away by the quality and experience of any plugin/slider/website building tool in…ever?? If you think I’m blowing smoke I dare you to try the WordPress plugin and disagree. The plugin has an almost “Flash like” experience of building your slides (except without the headaches). Add layers of text, images, or videos, then adjust animation, timing, etc.
Yup, it’s official… Flash is fucked.
What makes it so great?
- Pricing
- Responsive
- Video Support
- Flexibility / Customization Options
- Layers..Layers..Layers
- Touch Enabled
- Duplicate Existing Slides or Sliders Feature
The first thing I wondered when purchasing the plugin is how complicated creating the different layers would be, setting the timing of all the layers, etc. I remember the days of setting up timing in Flash and what a headache it was. Well with The Revolution Slider this was surprisingly simple. There are a ton of settings, allowing you to customize pretty much anything. Set different animations and timing for each slide, set different entering and leaving animations for each layer, it’s pretty unreal. The flexibility of the slider really allows you to create a “movie like” experience on your “slides”. The term “slider” doesn’t really seem like the right term for this in my opinion..
The Revolution Slider Demos
Here are 3 demos of the revolution slider in action. I created this slider for the demos of my WordPress theme Hipster. Check out the theme demo to see these slider in the larger size, and to test the responsive size-adjusting it offers. You can purchase my WordPress theme on ThemeForest, The Revolution Slider comes with the theme ready to use.
Demo with shadow type 1 and arrow navigation.
Demo with shadow type 2 and bullet navigation.
Demo with shadow type 3 and thumbnail navigation.
The Revolution Slider Instructions
How to install The Revolution Slider plugin
- Go to the Plugins section in the WordPress menu
- Click on the “Add New” button
- Click on “Upload”
- Click on “Choose File” (choose the revslider.zip which you downloaded from CodeCanyon), then click the “Install Now” button
- A new page will load; click on “Activate Plugin”
- A new section named “Revolution Slider” will appear in the WordPress menu to the left
How to use The Revolution Slider
The basic steps of using The Revolution Slider are as follows:
- Create a new slider
- Add slides (by uploading the background image for each slide)
- Customize each slide (add layers with text, images, videos)
- Put the slider on a page by pasting the shortcode into the page editor
For detailed instructions on using The Revolution Slider open the file READ_ME.html included with the plugin. This is the documentation from the plugin developer, Theme Punch. There is a helpful video below from the plugin developer.
Hipster Theme / Revolution Slider
If you are using the slider with my Hipster theme you will want to use the settings below so it resizes properly (this is for a full width slider like in the demo). The Hipster theme was built on the popular Skeleton responsive framework, so these setting will most likely work if you are building it into a different theme built on the same framework. There are a few specific settings that you should use when using the Revolution Slider with Hipster. After you create you slider, set the following numbers in the left column..
In the right column make sure to set the following:
After you have those settings you are ready to go. Create your slides and get creative! Use the cheat sheet below:
I’m sure you’ll be as impressed as I am with how easy setting up your own slider with The Revolution Slider is, you’re really only restricted by your creativity.. have fun!
Resources:
The Revolution Slider
Images from PhotoDune
‘Hipster’ WordPress Theme
