| It is almost a must to have a responsive website now that so many people view the web via a cell phone or tablet. But what if you want a slider on your homepage? Will it be responsive? Will the images and text in the slider animation resize to the width of the target device? Will the navigation for the slider be swipe enabled for mobile devices?|
If you have a responsive Wordpress site, one resource you might want to consider is the Slider Revolution by Themepunch. Itís reasonably priced at CodeCanyon and easy to install and setup. This jQuery HTML5 and CSS based plugin came preinstalled when I purchased the new Moxie Wordpress theme by ParallelusTM and I really like the results. You can also purchase it as an independent plugin. You can see it in action via the video below.
Besides being responsive, cross browser and SEO readable, it has some very nice features including layers. This slider isnít just a series of image slides, moving into view one after the other. Each slide in the Revolution slide show can have unlimited layers and each layerís content can be individually animated. For example, each text caption is on itís own layer, allowing you to move them on and off the screen independently. Inside the drag and drop layer editor, you can position each design element with your mouse - no coding the CSS - or change the hierarchy of the layers by simply dragging them up or down in the list.
The design elements on each layer have several parameters such as start and end times, CSS transition with jQuery fallback and type of easing. You can create simple animations on a slide such as the one I have in the video below. With a combination of transitions and easing, the train moves on to the screen and stops when it bounces against the app icon.
One feature I really like is that the text captions on each layer can be customized individually with custom CSS, allowing you to design the text weight, color and drop-shadow. Another feature is the ability to embed a YouTubeTM or VimeoTM video on a layer or several layers. The video can be set to automatically play when loaded on the page or when clicked by the viewer. It can play directly within the slider or at full screen.
You have several general design options for the slider such as background color, drop-shadow, type of navigation (thumbnails, bullets or arrows), navigation auto hide and auto pause with mouse hover. You can even use Google Fonts, set the defaults for multiple screen sizes or hide the slider on very small screens.
Finally, you can have more than one slider on your Wordpress site in areas such as the header, sidebars, posts or pages. The Themepunch website has several live previews for the Revolution slider and an in-browser Slider Configurator feature for testing before you buy.
Join us in the Animation forum. | Join us in the Digital Art forum.