When it comes to maximizing the amount of content that can be squeezed into the minimum amount of screen real estate, using a slider script to shuffle through multiple images makes a lot of sense. This popular presentation paradigm can easily get out of hand, however, with feature creep bloating file sizes; lessening sliders’ attractiveness to speed-conscious coders.
Enter Unslider (www.unslider.com), a lightweight (3kb), streamlined, jQuery slider that just slides content screens — but still offers some decent options for those looking for a little more — without going overboard.
Unslider is cross-browser compatible, having been tested in all the latest web browsers; and falls back nicely when displayed by legacy browsers.
According to its publisher, Unslider is cross-browser compatible, having been tested in all the latest web browsers; and falls back nicely when displayed by legacy browsers.
The script provides keyboard support, allowing users to navigate slides using the left and right arrow keys, and it adjusts for varying slide heights, stylishly transitioning these height values without requiring extra code.
As with many other current generation scripts, Unslider is made to be fully functional with responsively designed websites, allowing an easy fit into nearly any website’s look.
Using Unslider couldn’t be easier, even for technically challenged neophyte coders. Simply include both the Unslider and jQuery scripts on the required web pages. If you are already using jQuery, be sure to call the Unslider script after the jQuery call is completed.
“Unslider doesn’t need any really awkward markup; in fact, all you need is a DIV and an unordered list,” states a publisher’s rep. “You can add as many slides as you want, but Unslider won’t work properly with one slide (but then it’s just a box).”
While Unslider is a simple script, it does offer a number of useful options.
“Although it’s lightweight, Unslider comes with a range of options to customize your slider,” the rep notes. “You can add, remove, or completely skip out the options object. It’s up to you.”
These options include support for touch and swipe actions, commonly used on mobile ready and responsive sites, by using the jQuery.event.swipe plugin, for easy out-of-the-box functionality.
The Unslider configuration options include:
This allows you to start and pause Unslider through data.start(); and data.stop(); and to manually enable keyboard shortcuts and append the navigation dots, via data.keys(); and data.dots();, respectively.
Navigation may be enhanced through data.next(); and data.prev(); which will move to the next slide (or the first slide if there isn’t one) or move to the previous slide (or the last slide if there isn’t one). The data.move(0); function lets you go to a specific slide index, with an optional callback, providing a lot of flexibility for those seeking something a bit more than a simple slider.
While not the most fully-featured of content shufflers, Unslider does a great job of flipping through images and other content, and is free to use. Try it on your site and see if it makes a viewer-pleasing impact.
