unslider一个超小的 jQuery轮播（slider）插件

跨浏览器
Unslider已经在所有最新的浏览器上测试过了，并且对那些老旧的浏览器也能很出色的降级处理。

支持键盘导航
如果需要，可以加入键盘方向键导航。试一试左右方向键吧！

自动调整高度
并不是每个幻灯片都很规范，Unslider能够自动调整高度。

Yep，他还支持响应式布局
如今哪个网站还不支持响应式布局就已经非常OUT了。Unslider帮你轻松搞定！

下载地址：https://github.com/idiot/unslider/blob/master/src/unslider.min.js

1、引入jQuery 和 Unslider

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>

2、准备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、CSS代码

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }

4、JQuery代码

$(function() {
    $('.banner').unslider();
});

参数说明：

$('.banner').unslider({
    speed: 500,               //  滚动速度
    delay: 3000,              //  动画延迟
    complete: function() {},  //  动画完成的回调函数
    keys: true,               //  启动键盘导航
    dots: true,               //  显示点导航
    fluid: false              //  支持响应式设计
});

支持触摸屏

如果你想增加移动端/平板等触摸屏支持Unslider，你需要包括jQuery.event.swipe插件，就会变得很简单！

添加向前(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>

存取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();