扩展 Mixslider

Mixslider尽管很小，但是非常灵活和可扩展的：您可以改变选项/设置，方法或回调事件等 - 以下是文档说明。

自动化支持 Automatic support

Mixslider自动化支持几个不同的脚本，前提是在Mixslider之前引用了<script>标签。

Right-to-left (RTL) support

添加dir="rtl" Mixslider会更改幻灯片方向

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

Velocity.js 访问站点

替代jQuery的 .animate()更快的JS库， 如果你发现你的滑块看起来有点迟钝，强烈建议添加Velocity，因为它可以做一个明显的改进。

<script src="//cdn.jsdelivr.net/velocity/1.5/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>

方法

Mixslider有两种方法可以控制slider,如下所示

// 假设我们有这样的变量集…
var slider = $('.my-demo-slider').mixslider();

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

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

init args: options

当您第一次设置.mixslider()时，这将自动调用，但是如果出现布局问题，或者由于某种原因要重新启动滑块，则可以在此处调用它。 options变量是一个对象（见下文）。 您不能使用简写.mixslider('init')方法调用选项。

calculateSlides

如果幻灯片被添加或删除，您应该称之为否则事情可能会中断。

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

// 如果不需要最后一个滑块，可以移除它
slider.find('li:last').remove();

// 重新计算Mixslider，让它知道发生了什么
slider.mixslider('calculateSlides');

start

使滑块在幻灯片之间移动，使用options对象来确定幻灯片之间的延迟。

stop

停止滑块在幻灯片之间移动。 将停止任何自动播放。

destroyKeys

删除滑块的任何键盘快捷键处理程序。

initKeys

手动添加键盘快捷方式支持。 可以在destroyKeys恢复键盘快捷方式支持后使用，或者在options对象中使用{keys：false}，稍后再添加支持。

initSwipe

手动设置滑动功能（即如果要延迟加载）。 您可以通过在代码中包含 jquery.event.move和jquery.event.swipe 来自动添加。 如果您需要在页面加载后添加它，可以调用initSwipe，像这样:

$('.sliderman').mixslider();

// 假设某些原因我们想使用$ .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]);

// 一旦我们的脚本被加载，我们可以通过initSwipe添加刷卡支持
$.getScript(scripts[1], function() {
	$('.sliderman').mixslider('initSwipe');
});

destroySwipe

移除 swipe 支持

setIndex args: to

设置Mixslider的当前索引和导航。 这不会移动滑块！您可以获得一些愚蠢的结果，如果要将滑块移动到特定的幻灯片，我建议您使用animate()。

参数to可以是一个整数，其中要设置的幻灯片的索引（请记住：索引从零开始！）或字符串'first'或'last'如果你不知道有多少幻灯片。

animate args: to, dir

将滑块移动到特定的幻灯片，更新任何导航并触发 mixslider.change 事件。 像这样使用：

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

// 移动第一张幻灯片
slider.mixslider('animate:first');

// 移动第三个滑动e
// 记住，幻灯片是零索引的，所以0是第一张幻灯片，1是第二张等。
slider.mixslider('animate:2');

// 移动到最后一张幻灯片
slider.mixslider('animate:last');

// 移动到最后一张幻灯片并添加方向
slider.mixslider('animate:last,prev');

参数to是必需的，可以是一个整数，其中包含要设置的幻灯片的索引（请记住：索引从零开始！）或字符串'first'或'last'如果你不知道有多少幻灯片。

参数 dir 是可选的，可以是字符串'prev'或'next'。

next

手动移动到下一张幻灯片（或第一张幻灯片，如果您到达最后一张幻灯片）。

prev

与.mixslider('next')相同，但是在另一个方向。 如果后面没有更多的话，可以手动将滑块向后移动到最后一张幻灯片。

事件

Mixslider 触发一些可能因为任何原因可以方便的事件监听器，

// 设置我们的滑块以自动移动每秒，以便我们可以看到发生了什么
var slider = $('.slider').mixslider({ autoplay: true, delay: 1000 });

//  滑块设置完毕后，请关闭该事件。
slider.on('mixslider.ready', function() {
	alert('Slider is set up!');
});

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

选项

Mixslider使用标准的jQuery插件选项对象，如下图所示：

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

没有必要设置任何这些选项 - 您可以将这些选项全部留空，并返回到下表突出显示的默认值。

autoplay default: false

滑块自身移动还是手动触发？

speed default: 750

Mixslider应该在滑块之间滑动的速度（以毫秒为单位）。

delay default: 3000

如果autoplay设置为true，滑块滑动延迟间隔毫秒数？

index default: 'first'

如果设置为“first”或“last”，则会将默认幻灯片设置为该位置，而不是第一张幻灯片。

keys default: true

如果想添加Mixslider键盘操作支持，这可以设置为true、false或选项/键码对象，如下所示：

keys: {
	prev: 37,
	next: 39,
	stop: 27 // 示例：当按下Esc键时暂停
}

如果要扩展Mixlayider内置的功能，这可能很有用。

nav default: true

您要为滑块中的每个幻灯片生成可自动点击的导航吗？

您可以通过在每个幻灯片元素中添加 data-nav =“nav title”参数来覆盖每个链接中显示的内容（用标题替换“nav title”）。

如果要在幻灯片中添加点阵导航，只需将 mixslider-dots.css 包含到您的CSS文件中即可。

New您还可以提供计算幻灯片标签的功能：

nav: function(index, label) {
	//  $(this) 当前slide索引
	//  label 当前标签
	//  index slide索引，从0开始

	//  在第三张幻灯片上，附加“third slide!”
	if(index === 2) {
		return label + ' third slide!';
	}

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

arrows default: true

您要向您的滑块添加左/右箭头吗？ 您可以通过编写.mixslider-arrow的规则（或者您可以将HTML字符串更改为任何您喜欢的样式），并在其中设置样式，从而在CSS中设计样式。

这可以设置为true，false或选项对象。 如果设置了一个选项对象，默认行为将被覆盖。 默认对象如下所示：

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

	//  示例：生成按钮来启动/停止滑块自动播放
	stop: '<a class="mixslider-pause" />',
	start: '<a class="mixslider-play">Play</a>'
}

这个选项有点不正确，因为你可以设置它生成任何东西，而不只是箭头。

animation default: 'horizontal'

Mixslider应该如何动画化幻灯片？ 现在有三种不同的动画类型：

1. 'horizontal', 它从左到右移动幻灯片
2. 'vertical', 它从上到下移动幻灯片
3. 'fade', 这些幻灯片交叉淡化

selectors

如果您没有使用无序列表来显示您的滑块，则需要添加一个selectors对象，引用Mixslider应该查找哪些元素。 container应该是移动的“传送带”，slides很好 - 幻灯片.

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

注意: 您可能还需要更新/编写自定义CSS才能使Mixslider工作。 检查源代码文件mixslider.less可以更好地了解什么样的样式。

animateHeight default: false

Mixlayider是否会将容器的高度设为动画以匹配当前幻灯片的高度？ 如果是，请设置为true。

activeClass default:
'mixslider-active'

Mixslider设置为活动幻灯片和导航项目的课程？ 如果要匹配您的CSS，请使用此选项。