MEET UNSLIDER, THE SIMPLEST JQUERY SLIDER

In short, Unslider is the quickest and most straightforward way to have a slider up and running on your website. All it takes is a bit of valid markup, jQuery and some additional CSS. Then, Unslider takes over and does the rest.Sure, Unslider is small, but that’s its unique value proposition. Both flexible and extensible, it allows designers the freedom to pretty much alter anything they want through options/settings, methods or callback events.

Let’s look at some of its features…

AUTOMATIC SUPPORT

Unslider automatically supports various scripts when designers reference the <script> tag before Unslider.

Right-to-left (RTL) support – Add dir=“rtl” to make Unslider change the slide direction

Velocity.js – This is a quicker alternative to jQuery’s .animate(). If sliders are a tad sluggish, add Velocity for a noticeable improvement.

jquery.swipe.js – Include swipe support for desktop and mobile to sliders.

METHODS

Unslider comes with some methods you can utilize to control sliders and two ways of approaching this.

Method 1

slider.data(‘unslider’).methodName();
slider.data(‘unslider’).methodName(‘arguments,’ ‘go,’ ‘here’);

Method 2 (the shorthand version)

slider.unslider(‘methodName’);
slider.unslider(‘methodName:arguments,go,here’);

init – Set up everything with your slider. This is automatically called as you set up .unslider() for the first time, yet if there are layout problems, or you’d like to reinitiate the slider, you can call it here.

calculateSlides – Call the following to avoid things breaking when a slide’s added or removed:

var slider = $(‘.my-slider’).unslider();
// I don’t like this last slide. Let’s get rid of it
slider.find(‘li:last’).remove();
// Let’s recalculate Unslider so it knows what’s going on
slider.unslider(‘calculateSlides’);

start – Have the slider move itself between slides. Uses the object option to set delay between slides.

stop – Stop the slider from moving itself between slides. Stops the auto-playing.

destroyKeys – Remove the keyboard shortcut handlers for sliders.

initKeys – Add keyboard shortcut support manually. May be used after destroyKeys to restore keyboard shortcut support.

initSwipe – Manually set up swipe functionality. Add it automatically by including jquery.event.move and jquery.event.swipe in the code. To add it after page load, call initSwipe this way:

$(‘.sliderman’).unslider();
// Let’s say we want to use $.getScript to load our scripts for some reason
var scripts = [
‘http://stephband.info/jquery.event.move/js/jquery.event.move.js’.
'http://stephband.info/jquery.event.swipe/js/jquery.event.swipe.js'
];
$.getScript(scripts[0]);
// Once our script is loaded, we can initSwipe to add swipe support
$.getScript(scripts[1], function() {
              $('.sliderman').unslider('initSwipe');
});
destroySwipe – Remove swipe support.

setIndex – Set the current index as well as navigation for Unslider. You won’t be able to move the slider. To move to a specific slide, rely on animate().

animate – Move to a specific slide, update any navigation, and fire an unslider.change event. Do this:

//  Our trusty slider!
var slider = $('.slider').unslider();
//  Move to the first slide
slider.unslider('animate:first');
//  Move to the third slide
//  Remember, slides are zero-indexed so 0 is first slide, 1 is second, etc.
slider.unslider('animate:2');
//  Move to the last slide
slider.unslider('animate:last');
//  Move to the last slide and add a direction
slider.unslider('animate:last,prev');

next – Move to the next slide, manually.prev – Same thing as .unslider(‘next’), yet in the other direction. Manually moves the slider backwards.

by: MARC SCHENKER