How to Create Beautiful Responsive Sliders with WordPress and the SlideDeck Plugin
SlideDeck is one of the longest established premium slider plugins available for WordPress, launching way back in 2009! They have recently launched version 3.0 of the plugin with a lot of improvements to the speed, SEO and made it fully responsive.
The plugin allows you to create great looking sliders with a lot of customization options by the way of a “lense” feature and you can see all changes to the appearance made in real time via a preview window.
- 12 Lenses – Lenses are preset styles which you can choose for your slider display, you can also customize them or create your own from scratch.
- Multiple Content Sources – Choose from Images, Videos, Text or HTML.
- Dynamic Content Sources – Pull in content from external sites such as Instagram, Facebook, Flickr, Dribbble and so on.
- Lots of Customization Options – Change Fonts, Transition Effects, Navigation options and add your own custom CSS.
- Multiple Usage – Place the slider directly into themes, new posts / pages or add to existing posts.
Plugin Installation and Setup
After downloading and activating the plugin, your first step is to enter the license key which enables automatic updates and support, this is done by visiting the “Slide Deck” > “Advanced Options” menu item.
At the bottom of these options in space to enter your Twitter username and API keys for Instagram, Google+, YouTube and Dribbble.
Under the “SlideDeck” > “Lenses” menu option you will find your available lenses listed, these are basically pre-set styles which control the appearance of your actual slider. There are currently 12 available – 9 free ones included and a further 3 premium ones which cost $9 each or all 3 for $24.
From here you can also create a new lens from scratch, or copy one of the existing lenses and edit it. Unfortunately there is no visual editor for creating your lense – it is handled with CSS so you would need to be able to code one yourself or be able to tweak the existing CSS, there is developer information for doing so located here.
Creating a Slider
To get started creating your first slider, head to the “Manage” menu link and you will see you have 2 options to choose from – “Dynamic Source”, which is where you can pull in content from many different websites and social media profiles, or “Custom Content” which allows you to design the slider using text, images, videos and so on.
After choosing which type of slide you wish to create ( I chose to make one from my Pinterest account ) you are taken to the setup screen, you can name your slider at the top and add your source username or API credentials, underneath is a preview of how your slider will look.
Underneath the preview is the options area where you can first pick a lense to use for your slider.
What I love about this part, is you can click the different lense below and the slider above will update to the new design automatically so you can try out all the different layouts without a page refresh or having to view the slider on your site.
Once you have picked a lense, you can click the “Setup” tab and change some options for it, like size of the slider, number of slides, overlay etc – once again, your changes will be updated in the live view above.
The “Appearance” tab allows you to modify colors, fonts and some other choices :
The “Content” tab is where you can tweak things like the title length, text options, links, date format and so on.
“Navigation” gives you some options for the slide controls, keyboard / mouse and touch navigation :
The final tab is named “Playback” and here is where you can define slide order, starting slide, animation speeds and so on.
Once you are happy with your slider settings, click the “Save” button at the bottom and you will be presented with some options on how to place the slider on your site. You can use a button added to your Visual Editor to insert the slider in a post or page, create a new page or post with it added or by manually placing a shortcode where you want it to appear.
My slider inserted into a page :
Pricing for SlideDeck starts at $49 for a personal license, $99 for the professional and $119 for the developer license which contains all lenses and all content sources. You can check out the pricing grid here to see what is included with each license type.
I must say I loved this plugin – its very easy to use and feels very polished, the setup of a slider was one of the best I have seen so far. I love the fact you can pull in content from many different sources like Instagram, Flickr, Dribbble and so on – I can see this being a nice feature to add to your portfolio or business website. The lens feature is nice, but is let down slightly by the fact that creating your own relies on editing raw CSS, a visual builder added here would be a huge improvement.
Pricing wise, $49 for a personal license seems fair as the developer is constantly improving the plugin with more features and new lenses. I pleased to recommend this plugin to WPLift readers.