Unslider — 一个超小的 jQuery 轮播（slider） 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。
1 跨浏览器
Unslider已经在所有最新的浏览器上测试过了，并且对那些老旧的浏览器也能很出色的降级处理。
2 支持键盘导航
如果需要，可以加入键盘方向键导航。试一试左右方向键吧！
3 自动调整高度
并不是每个幻灯片都很规范，Unslider能够自动调整高度。
4 支持响应式布局
如今哪个网站还不支持响应式布局就已经非常OUT了。Unslider帮你轻松搞定！
如何使用Unslider
1、如何使用Unslider
要使用Unslider，你需要确保两个Unslider和jQuery脚本都包括在内。如果你已经有jQuery的（你可以打开你的JavaScript控制台和打字测试！window.jQuery -如果说真的，你有jQuery的），你并不需要添加的第一行。
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>
2、准备HTML代码
Unslider不需要任何真正尴尬的标记。事实上，所有你需要的是一个DIV和无序列表。一些Unslider友好的HTML的一个例子是在右边。
<div class="banner">
<ul><li>This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul></div>
3、Make it pretty
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
4、参数
$('.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});
5、添加向前(previous)/向后（next）链接
<!-- The HTML -->
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>
<!-- And the JavaScript -->
<script>var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
</script>
6、存取Unslider的属性
var slidey = $('.banner').unslider(),
data = slidey.data('unslider');
// Start Unslider
data.start();
// Pause Unslider
data.stop();
// Move to a slide index, with optional callback
data.move(2, function() {});
// data.move(0);
// Manually enable keyboard shortcuts
data.keys();
// Move to the next slide (or the first slide if there isn't one)
data.next();// Move to the previous slide (or the last slide if there isn't one)
data.prev();
// Append the navigation dots manually
data.dots();