Going Round in Circles: Choosing a Content Slider
A slider is what we web geeks call any funky banner space that appears on a web site. It's usually a series of big, bold visuals designed to entice the user with a quick sales pitch or highlight key projects and upcoming events. It can be a simple series of images (as demonstrated on Oxfam) but they can also be as intricate as the BBC's home page where the slider moves between various sections, each with its own layout and in-depth content.
Anyone looking to implement a slider will have seen plenty of articles titled 'Top 20 jQuery sliders' and there are many options to choose from. At Liquid Light we've tried and tested most of them, always looking for a single slider that handles all the quirks of functionality that different sites inevitably require. As our projects are built using the TYPO3 CMS, a slider has to be integrated with other content, so editors can switch messages and graphics as required. Here are some plug-ins we've implemented...
The jQuery Cycle plug-in is one of the originals, a reliable favourite of ours for various slideshows. At its heart, it's an image slider that you can extend with an array of fancy transitions. Forget boring old fade, with Cycle you can shuffle images like a deck of cards or zoom in and out. It's tremendously easy to get up and running. On the site for our client ICA we implemented a series of bold images on their home page to highlight the various infrastructure projects they're involved with in Africa.
The Responsive Slides plug-in is a very neat, lightweight solution we used for The Gym Group to promote their key sales messages throughout the site. The size of the slides react to the browser, but the options are limited; you can only fade between slides and content has to be in unordered list tags. If only there was a plug-in that had a variety of options but also behaved responsively...
Product design company Zurb built Foundation 3, a powerful front-end framework that is fully responsive and makes building sites for multiple device sizes very simple. Part of that framework is Zurb's cool slider Orbit which combines responsiveness with some nifty options that make it the most flexible slider we've played with. Orbit lets you take most types of content (div, images, list items) and turn them into slides with options to have a play/pause interface and thumbnails if desired.
When it came to creating a BBC-style news slider on the home page of mortgage advisors John Charcol Orbit was the jQuery plug-in we opted for, allowing us to make each slide a content rich series of news stories and promotions. The only drawback when using content rather than images is that each slide can't be transparent and needs a background colour because the slides are stacked on top of each other rather than hidden from view. But Orbit is constantly evolving over on GitHub with feature requests being worked on by Zurb's developers.
All the above examples are very simple to get up and running, provided clients don't require anything too bespoke. Over on AFDB, we had to come up with our own customised slideshow in order to show their latest news stories with a thumbnail, title and synopsis. But the Orbit plug-in has come in very handy, allowing us to quickly turn a series of images or news stories into something much more exciting.