Responsive Jquery Slider – Unslider –

by Posted on

unslider-jquery_sider_plugin

Unslider is a very small jQuery plugin (<1kb minified and gzipped) for sliding any HTML content in a website. Unslider is a Responsive Jquery Slider Plugin. It adapts to responsive layouts out-of-the-box and arranges itself automatically if the size of each slide is different.

The slides can be browsed with the help of a bullet navigation or using keyboards. Optionally, swipe/touch support can be added with jQuery.event.swipe plugin (a plug ‘n’ play solution).

Speed and delay of the slides can be defined and it has an API for controlling its functions.

Unslider doesn’t need any really awkward markup. In fact, all you need is a div and an unordered list. An example of some Unslider-friendly HTML is on the website.

You can add as many slides as you want:

Options

Although it’s lightweight, Unslider comes with a range of options to customise your slider. Here’s the default options provided. You can add, remove, or completely skip out the options object. It’s up to you.

$('.banner').unslider({
	speed: 500,               //  The speed to animate each slide (in milliseconds)
	delay: 3000,              //  The delay between slide animations (in milliseconds)
	complete: function() {},  //  A function that gets called after every slide animation
	keys: true,               //  Enable keyboard (left, right) arrow shortcuts
	dots: true,               //  Display dot navigation
	fluid: false              //  Support responsive design. May break non-responsive designs
});

Touch support

If you want to add mobile/touch/swipe/whatever support to Unslider, you’ll need to include the jQuery.event.swipe plugin, then it’ll work out the box. Easy!

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://unslider.com/
Download: https://github.com/idiot/unslider

Related articles
Enhanced by Zemanta

Leave a Reply

%d bloggers like this: