README

FlexSlider 2.7.2

版本发布

此存储库的 master 分支总是FlexSlider的最新开发版本。请查看版本发布部分以获取官方FlexSlider构建列表。

贡献

我们鼓励为FlexSlider做出贡献，并将审查提交的所有pull请求。

在贡献之前，请参阅我们的贡献指南。

路线图

要了解FlexSlider的开发路线图，请参阅我们的开发路线图。

更新

** 版本 2.7.2 **

** 优化jQuery HTML输出的img属性。

** 版本 2.7.1 **

** Firefox浏览器的RTL修复。

** 版本 2.7.0 **

** 修复了orientationchange事件调用resize方法的问题。添加了RTL功能 - 添加了"rtl"参数。**

** 版本 2.6.3 **

** 由于强烈的淡入淡出报告，撤销了淡入修复。**

** 版本 2.6.2 **

** 小更新以解决不同高度和溢出到滑动器下方内容的问题。修复了"淡入"模式中分页和导航的可见性。**

** 版本 2.6.1 **

** SmoothHeight现在使用innerHeight()而不是height()来考虑计算中的填充。定义var altText以防止错误。在bower.json中将字体文件夹添加到main字段。将true更改为false以确保是否允许由单个幻灯片组成的滑动器。**

** 版本 2.6.0 **

** 添加了composer json文件，修复了聚焦关键词的scope问题，修复了bower演示文件夹的排除问题，修复了禁用导航箭头的z-index问题，修复了播放/暂停的可访问性问题，修复了滑动器项的itemMargin问题，修复了聚焦元素和分页控制的可访问性，修复了Firefox在滑动器轮播中选择文本的问题，添加了data-thumb-alt图像alt属性。**

** 版本 2.5.0 **

** 从jQuery 1.7+开始提升兼容性支持。修复了pausePlay图标问题。修复了Firefox触摸事件问题。添加了自定义DirectionNav参数。**

** 版本 2.4.0 **

** 更新以改进标准。为li导航元素添加类。在样式表中重置li元素。**

** 版本 2.3.0 **

** 修复了与Chrome和Page Visibility API的pauseInvisible属性问题。**

** 版本 2.2.2 **

** 修复了minified JavaScript文件以删除合并冲突。**

** 版本 2.2.0 **

修复了与同时启用点击和触摸功能的设备（例如，Windows 8）的事件处理器冲突。
将所有滑动器变量设置为公共变量，存储在slider.vars中。这允许动态操作slider.vars.minItems和slider.vars.maxItems以在特定断点创建不同的流体网格。查看此示例，演示基本技术
修复了导致分页和某些FlexSlider错位的奇怪问题的计算。

在将v2.2.0上线之前，请务必测试您的当前滑动器，以确保一切正常。

一般说明

FlexSlider不再使用MIT许可证。FlexSlider现在使用GPLv2和更新的许可证。

为了推动插件的发展，已取消对jQuery 1.4.2的支持。现在插件需要jQuery 1.7.0及以上版本。如果您没有访问较新版本的jQuery，FlexSlider 1.8应该能够完全满足您的需求！

您可能需要手动调整旧样式和属性，因为一些属性名已经更改，如下所示，同时所有元素都应用了命名空间前缀。这意味着默认情况下，.flex-direction-nav .next现在是.flex-direction-nav .flex-next。命名空间属性已公开，您可以自由更改。

不再有溢出隐藏的烦恼！现在插件生成一个视口元素来处理溢出隐藏的繁琐任务。太好了！

现在可以通过jQuery的.data()方法在回调API外部访问滑块元素。示例使用：$('#slider').data('flexslider')

已添加辅助字符串以快速在FlexSlider元素上执行操作。示例使用

$('#slider').flexslider("play") //播放幻灯片
$('#slider').flexslider("pause") //暂停幻灯片
$('#slider').flexslider("stop") //停止幻灯片
$('#slider').flexslider("next") //转到下一张幻灯片
$('#slider').flexslider("prev") //转到上一张幻灯片
$('#slider').flexslider(3) //转到第四张幻灯片

现在提供了两个新方法来添加/删除幻灯片：slider.addSlide()和slider.removeSlide()。有关此功能的更多详细信息即将推出。

slider.addSlide(obj, pos)接受两个参数，一个字符串/jQuery对象和一个索引。
slider.removeSlide(obj)接受一个参数，可以是要删除的对象或索引。

示例

RTL示例

属性

namespace: {new}

namespace控制插件创建的元素附加的前缀。在之前的版本中，只有某些元素被标记为带有前缀类，这导致某些用户出现了类泛化问题。FlexSlider现在使用适当的命名空间前缀所有生成的元素。

提示：namespace可以是一个空字符串。

selector: {new}

在FlexSlider的前版本中，FlexSlider的标记结构被限制为"ul.slide li"模式；现在不再是。现在您可以完全控制用于您的FlexSlider的标记结构。必须使用selector模式"{container} > {slide}"，允许插件可预测地解释选择器属性。不推荐从选择器中省略">"，但如果您的标记不遵循直接后代模式，则可能这样做。

示例："section > article", ".slides > .slide", "#hero .slide"

easing: {new}

easing允许支持jQuery easing！jQuery提供的默认选项是"swing"和"linear"，但可以通过包含jQuery Easing插件使用更多选项。如果您选择了一个不存在的easing方法，滑块将会出错。

注意：您需要设置useCSS: false以强制在支持translate3d的浏览器中应用过渡。 可选：jQuery Easing Plugin

direction: {changed}

在v1.8及以下版本中被称为"slideDirection"。

reverse: {new}

reverse将反转滑块的动画方向。这意味着水平滑块可以从右向左移动，而垂直滑块可以从下向上移动。

smoothHeight: {new}

smoothHeight 允许在幻灯片之间进行平滑的高度转换。此属性目前适用于淡入和水平滑动动画。但是，此属性对水平滑动轮播没有影响。

startAt: {已更改}

在 v1.8 及以下版本中曾称为 "slideToStart"。

animationSpeed: {已更改}

在 v1.8 及以下版本中曾称为 "animationDuration"。

initDelay: {新增}

initDelay 将延迟滑块的初始幻灯片显示，以毫秒为单位。滑块仍会初始化，生成控件并显示第一张图片，但幻灯片显示将等待 initDelay 时间完成后再开始。

useCSS: {新增}

useCSS 允许用户覆盖使用 CSS3 进行动画。由于 translate3d 仍有大量漏洞，因此如果在使用 Webkit 浏览器时遇到难以解释的问题，这是一个很好的属性来尝试。

提示：使用条件语句在桌面和移动设备上启用/禁用 CSS3 的使用。根据我的经验，移动设备与桌面浏览器中看到的 translate3d 漏洞共享不多。

touch: {新增}

touch 允许用户从滑块中排除触摸滑动功能。

keyboard: {已更改}

在 v1.8 及以下版本中曾称为 "keyboardNav"。

multipleKeyboard {新增}

multipleKeyboard 允许用户覆盖默认插件键盘行为，启用页面中多个滑块的键盘控制。这意味着所有可见的滑块将通过键盘输入同时进行动画处理。

提示：您可以使用 multipleKeyboard 在存在多个滑块但只有一个可见的页面上允许键盘导航。

mousewheel: {更新}

mousewheel 现在需要 jQuery Mousewheel 插件。原因有几个，但主要是由于 FlexSlider 本身没有必要重新发明由 Mousewheel 插件完美处理的鼠标滚轮交互的尴尬复杂性。

必需：[jQuery Mousewheel 插件](https://github.com/brandonaaron/jquery-mousewheel "jQuery Mousewheel Plugin")

controlsContainer: {更新}

controlsContainer 是 FlexSlider 中更繁琐、可能更令人困惑的属性之一。首先，该属性不再需要作为解决 overflow: hidden 在滑动动画中的问题。其次，该属性现在接受一个 jQuery 对象，让您可以精确控制您想要的对象。插件不再试图猜测您选择的是哪个元素。

customDirectionNav: {新增}

customDirectionNav 允许添加自定义方向导航元素。可以与 controlsContainer 一起用于分页控件容器。

customDirectionNav 的使用示例

sync: {新增}

sync 是一个新属性，它将允许其他滑块通过给定的选择器连接到当前滑块。选择器应描述一个已经初始化为 FlexSlider 的对象。目前，sync 将同步动画、播放和暂停行为。随着属性的成熟，可以添加更多行为。

sync 的使用示例

asNavFor: {新增}

描述待添加。

itemWidth: {新增}

itemWidth 是新轮播选项的主要属性。没有此属性，您的滑块不被视为轮播。要使用 itemWidth，请提供一个整数值，表示单个幻灯片的宽度。这应该包括应用于幻灯片的边框和内边距；总宽度测量。

itemMargin: {新增}

itemMargin 描述了幻灯片元素之间的间隙。如果每个幻灯片具有 10px 的 margin-left，则您的 itemMargin 值为 10。如果元素具有 margin: 0 10px，则您的 itemMargin 为 20。

minItems: {新增}

minItems 描述了轮播图中应可见的最小幻灯片元素数量。当滑块达到最小项目计数时，幻灯片将随滑块流畅调整大小。

maxItems: {新}

maxItems 描述了轮播图中应可见的最大幻灯片元素数量。当滑块达到最大项目计数时，幻灯片将随滑块流畅调整大小。

move: {新}

move 决定了在轮播图中应动画多少个幻灯片。当设置为0时，滑块将动画可见幻灯片的数量。如果给定任何大于0的值，滑块将在每个动画间隔中动画该数量的幻灯片。

提示：如果值高于可见幻灯片的数量，则将忽略移动属性，这可以在响应式设计中利用。

added: {新}

added() 是在新的 slider.addSlide() 函数中触发的新回调事件。

removed: {新}

removed() 是在新的 slider.removeSlide() 函数中触发的新回调事件。

allowOneSlide: {新}

布尔值。表示是否希望在只有一个幻灯片时，FlexSlider像往常一样初始化。

rtl: {新}

布尔值。默认为False。支持滑块中的RTL功能。注意：您必须将 style="direction:rtl" 添加到您的容器div中，以便此功能生效。

isFirefox: {新}

布尔值。默认为False。如果正在使用Firefox浏览器，则设置为true。注意：用于RTL兼容性逻辑。

ion / woocommerce-flexslider

维护者

详细信息