简介

如果你想有一个快速、轻便的滑块，只有箭头，没有花哨的效果，那么你会喜欢Unslider的。未压缩时的重量为4kb，压缩后的重量为1.9kb，这是一个非常轻的解决方案。

使用

1.  引入文件

<link href="unslider.css" rel="stylesheet"> 
<script type="text/javascript" src="jquery-1.10.1.min.js"> </script>
 <script type="text/javascript" src="unslider.js"> </script>

2.  HTML

<div class="banner">
  <ul >
    <li style=" background-image: url(http://unslider.com/img/sunset.jpg);"></li>
    <li style=" background-image: url(http://unslider.com/img/wood.jpg);"></li>
    <li style="background-image: url(http://unslider.com/img/subway.jpg);"></li>
    <li style="background-image: url(http://unslider.com/img/subway.jpg);"></li>
  </ul>
</div>

3.  调用

初试化：

$(function() {
    unslider = $('.banner').unslider({
      speed: 500,			   //  切换的速度
      delay: 3000,			  //  切换的速度
      keys: true,			   //  是否启用左右按钮控制slider切换
      fluid: false,			  // 是否每次在容器大小改变的时候，修正slider的大小
      pause:true,				 //鼠标以上去是否暂停播放
      starting:function(){		//每次开始切换时回叫方法
        console.log("starting");
      },
      complete:function(){		 //每次完成切换时回叫方法
        console.log("complete");
      },
      arrows: true,			   //  是否显示左右箭头，用于slider切换
      dots: true				  //  是否显示白色圆点，用于slider切换
    });
 });

使用：

var data = unslider.data('unslider');
// 开始
data.start();
// 暂停
data.stop();
//  切换至第n个 function是回调函数
data.move(2, function() {});
//  data.move(0);
//  切换下一个
data.next();
// 切换上一个
data.prev();

相关链接

GitHub 地址：https://github.com/seanwittmeyer/Unslider