扩展Unslider

Unslider很小，但是很灵活且可扩展：你可以通过 选项/设置、方法或回调 来修改很多东西，这些东西会在下文中提到。

Automatic support

Unslider automatically supports a few different scripts, provided the <script> tag is referenced before Unslider.

Right-to-left (RTL) 支持

添加 dir="rtl" Unslider将会改变轮播方向

<div class="my-slider" dir="rtl"></div>

Velocity.js 访问站点

一个使jQuery.animate()运行更快的插件。如果你的轮播运行的有些不流畅，强烈建议添加Velocity，因为Velocity能使动画效果显著提高。

<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

jquery.swipe.js 访问站点

为你的轮播提供移动设备和桌面设备的滑动支持。查看下面的 initSwipe 和 destroySwipe 方法来了解它的运行机制。

<script src="//stephband.info/jquery.event.move/js/jquery.event.move.js"></script>
<script src="//stephband.info/jquery.event.swipe/js/jquery.event.swipe.js"></script>

方法

Unslider有大量方法供你使用来控制轮播，你可以通过两种方式来使用这些方法，如下所示。

//  假设我们设置了一个这样的变量...
var slider = $('.my-demo-slider').unslider();

// 方法 1
slider.data('unslider').methodName();
slider.data('unslider').methodName('arguments', 'go', 'here');

// 方法 2 (速记法)
slider.unslider('methodName');
slider.unslider('methodName:arguments,go,here');

init args: options

Set everything up with the slider. This is called automatically when you set up .unslider() for the first time, but if there's layout problems or you want to re-initiate the slider for some reason, you can call it here. The options variable is an object (see below). You can't call options with the shorthand .unslider('init') method.

calculateSlides

如果添加或删除了一个滑块，则应该调用该方法，否则可能会出现异常。

var slider = $('.my-slider').unslider();

// 看最后一个幻灯不顺眼，把它移除掉
slider.find('li:last').remove();

// 重新计算Unslider
slider.unslider('calculateSlides');

start

是每个滑块在幻灯片之间移动。可以设置 选项对象 来确定滑块移动的延时。

stop

停止滑块移动。自动播放也会停止。

destroyKeys

移除键盘控制。

initKeys

添加键盘按键支持。可以用在 destroyKeys 之后来重新设置键盘支持，或者在设置对象中设置 {keys: false} 以备之后开启键盘支持。

initSwipe

Set up swipe functionality manually (比如，你想延迟加载)。 You can add it automatically by including jquery.event.move and jquery.event.swipe in your code. 如果你需要在页面加载之后添加，则可以像这样调用 initSwipe：

$('.sliderman').unslider();

//  假设因为某个原因我们使用 $.getScript 来加载脚本
var scripts = [
	'http://stephband.info/jquery.event.move/js/jquery.event.move.js',
	'http://stephband.info/jquery.event.swipe/js/jquery.event.swipe.js'
];

$.getScript(scripts[0]);

//  一旦加载了脚本，就可以初始化Unslider添加滑动支持
$.getScript(scripts[1], function() {
	$('.sliderman').unslider('initSwipe');
});

destroySwipe

移除swipe支持。Does what it says on the tin.

setIndex args: to

为Unslider设置当前索引和导航。这并不会移除slider！ 如果你想将slider移动到某个特定的滑块，使用该方法可能会得到一些糟糕的结果，我推荐你使用 animate() 来实现。

参数 to 是你想移动到的索引（记住：索引从0开始），如果你不知道总共有多少个滑块，可以使用字符串 'first' 或者 'last'。

animate args: to, dir

Move the slider to a specific slide, update any navigation and fire a unslider.change event. Use like so:

//  Our trusty slider!
var slider = $('.slider').unslider();

//  移动到第一个滑块
slider.unslider('animate:first');

//  移动到第三个滑块
//  请注意，滑块索引是从0开始，即0是第一个滑块，1是第二个滑块，以此类推。
slider.unslider('animate:2');

//  移动到最后一个滑块
slider.unslider('animate:last');

//  移动到最后一个滑块，并添加方向导航
slider.unslider('animate:last,prev');

参数 to 是必选项， 是你想移动到的索引（记住：索引从0开始），如果你不知道总共有多少个滑块，可以使用字符串 'first' 或者 'last'。

参数 dir 是可选项， 可以是字符串 'prev' 或者 'next'。This doesn't do anything, yet.

next

手动移动到下一个滑块（如果现在是最后一个滑块，则移动到第一个滑块）

prev

除了移动方向相反，其他的和 .unslider('next') 相同。 Moves the slider backwards manually or to the last slide if there's no more behind it.

事件

Unslider提供了事件监听器，也许这会在某些方面给我们提供一些便利。

//  设置轮播自动播放，滑动时间间隔为1s，这样有利于我们观察
var slider = $('.slider').unslider({ autoplay: true, delay: 1000 });

//  When the slider has been set up, fire the event off.
slider.on('unslider.ready', function() {
	alert('Slider is set up!');
});

//  监听滑动变化事件
slider.on('unslider.change', function(event, index, slide) {
	alert('Slide has been changed to ' + index);
});

选项

Unslider使用的是标准的jQuery插件选项对象，它看起来像下面高亮的例子：

$('.my-demo-slider').unslider({
	settingName: settingValue,
	anotherSetting: anotherValue
});

这些选项如果不设置的话，Unslider会使用下表所示的高亮默认值。

autoplay default: false

是否自动播放？

speed default: 750

滑块速度（单位：ms）。

delay default: 3000

如果 autoplay 设置为true，则该选项为两个滑块滑动的时间间隔（单位：ms）。

index default: 'first'

如果设置为整数、 'first' 或 'last'，轮播滑块的默认索引将变为该设置项的值，而不是第一个滑块。

keys default: true

想为Unslider添加键盘按键支持么？可以通过设置 true、 false，或一个 options/keycode 对象来实现，就像这样：

keys: {
	prev: 37,
	next: 39,
	stop: 27 //  例子：按下 Esc 暂停
}

这将有利于你扩展Unslider的内置函数。

nav default: true

Do you want to generate an automatic clickable navigation for each slide in your slider?

You can over-ride what appears in each link by adding a data-nav="nav title" parameter to each slide element (replacing 'nav title' with whatever you'd like the title to be).

If you want to add dot-navigation to a slide, simply include unslider-dots.css to your CSS file.

New You can also provide a function to calculate the slide label:

nav: function(index, label) {
	//  $(this)是当前滑块
	//  label是当前的label
	//  index是从0开始的滑块索引

	//  On the third slide, append " third slide!"
	if(index === 2) {
		return label + ' third slide!';
	}

	//  只显示数字
	return index + 1;
}

arrows default: true

想为轮播添加 左/右 箭头么？You can style these in your CSS by writing rules for .unslider-arrow (or alternatively you can change the HTML string to whatever you like and style that).

该选项可以设置为 true 或 false，或者是一个对象。如果设置为一个对象，则默认的设置会被覆盖。默认的对象是这个样子的：

arrows: {
	//  Unslider默认行为
	prev: '<a class="unslider-arrow prev">Previous slide</a>',
	next: '<a class="unslider-arrow next">Next slide</a>',

	//  例子：生成 start/stop 按钮来控制自动播放
	stop: '<a class="unslider-pause" />',
	start: '<a class="unslider-play">Play</a>'
}

该选项可能会产生一些误解，你可以设置成生成任何东西，而不仅仅是箭头。

animation default: 'horizontal'

滑块在滑动过程中展现什么动画呢？目前有三种动画类型：

1. 'horizontal', 从左到右滑动
2. 'vertical', 从上到下滑动
3. 'fade', 交叉淡入淡出

selectors

If you're not using an unordered list to display your slider, you'll need to add a selectors object referencing what elements Unslider should look for. The container should be the "conveyor belt" that gets moved, and the slides are - well - the slides.

selectors: {
	container: 'ul:first',
	slides: 'li'
}

Note: you'll probably also need to update/write custom CSS in order for Unslider to work. Check the source files for unslider.less to get a better idea of what needs styling.

animateHeight default: false

Should Unslider animate the height of the container to match the current slide's height? If so, set to true.

activeClass default:
'unslider-active'

Unslider为活动的滑块设置的类。你可以设置该选项来匹配自己的样式。