标题：jquery全屏响应式幻灯片插件Unslider
出处：沧海一粟
时间：Tue, 15 Dec 2015 23:29:12 +0000
作者：jed
地址：http://www.dzhope.com/post/1010/

内容：
Unslider是一个非常纯粹的jquery幻灯片插件，它没有多余的特效，用的只是非常简单也非常普通的滚动特效，但它的优点在于文件非常小，只有3K，CSS可以完全自定义，支持各现代浏览器，支持键盘操作。Unslider可以自动检测图片的高度，并自动平滑的调整图片的高度来适应幻灯片。

使用方法

引入jquery和unslider


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


构建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>


美化外观，你可自定义CSS样式来美化

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



写入JS初始化插件

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


选项

虽然unslider是轻量级的,但也设置了一系列的选项来定制你的幻灯片（滑块）。以下是默认选项。您可以添加、删除或完全跳过这些选项，决定权在你手。


$('.banner').unslider({
    speed: 500,               // 动画的滚动速度
    delay: 3000,              //  每个滑块的停留时间
    complete: function() {},  //  每个滑块动画完成时调用的方法
    keys: true,               //  是否支持键盘
    dots: true,               //  是否显示翻页圆点
    fluid: false              //  支持响应式设计（有可能会影响到响应式）
});


触屏支持

如果你想让Unslider支持moblie、触屏、swipe等任何支持，那你需要引入jQuery.event.swipe。

添加pre,next按钮

Unslider的默认功能,不包括上一页/下一页按钮。不过幸运的是,他们可使用Unslider的方法轻松的添加上。

<!-- 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属性

使用jQuery的完美的数据方法,您可以访问和手动覆盖任何方法。以下列表是你可以操作的方法:


var slidey = $('.banner').unslider(),
    data = slidey.data('unslider');
     
//  开始 Unslider
data.start();
 
//  暂停 Unslider
data.stop();
 
// 滑块跳转,还有一个可选的方法参数
data.move(2, function() {});
//  data.move(0);
 
//  手动激活键盘功能
data.keys();
 
// 跳转到下一滑块，最后一个时不显示
data.next();
 
//  跳转到上一滑块，最前一个时不显示
data.prev();
 
//  添加圆点导航
data.dots();



参考链接：
http://www.jqcool.net/jquery-unslider.html
http://stephband.info/jquery.event.swipe/
http://www.bootcss.com/p/unslider/
http://unslider.com/
http://www.tuicool.com/articles/ZVn6bub
http://www.jq22.com/jquery-info1940
http://www.jq22.com/yanshi1940


Generated by Bo-blog 2.1.1 Release