README

FlexSlider 2.7.2

版本

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

贡献

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

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

路线图

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

更新

** 版本 2.7.2 **

** 重新整理 jQuery HTML 输出以针对 img 属性。

** 版本 2.7.1 **

** Firefox 浏览器的 RTL 修复。

** 版本 2.7.0 **

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

** 版本 2.6.3 **

** 由于 fade 报告过于严格，撤销了 fade 修复。**

** 版本 2.6.2 **

** 对高度变化和滑动到下方内容上的溢出进行了小更新。修复了 "fade" 模式下分页和导航的可见性。**

** 版本 2.6.1 **

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

** 版本 2.6.0 **

** 添加了 composer json 文件，修复了聚焦关键字的范围问题，修复了 bower 示例文件夹排除问题，修复了禁用导航箭头的 z-index 问题，修复了播放/暂停的无障碍性问题，修复了滑动器轮播中的项目间隔问题，修复了聚焦元素和分页控件的无障碍性问题，修复了 Firefox 中文本选择问题，添加了 data-thumb-alt 图像 alt 属性。**

** 版本 2.5.0 **

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

** 版本 2.4.0 **

** 更新以提高标准。将类添加到 li 导航元素。重置样式表中 li 元素的样式。**

** 版本 2.3.0 **

** 修复了 Chrome 和页面可见性 API 的 pauseInvisible 属性问题。**

** 版本 2.2.2 **

** 修复了最小化 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: {新}

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

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

selector: {新}

在FlexSlider的早期版本中，FlexSlider的标记结构被限制为"ul.slide li"模式；不再如此。您现在可以完全控制用于您的FlexSlider的标记结构。必需的selector模式"{container} > {slide}"允许插件可预测地解析选择器属性。建议不要从选择器中省略">"，但如果您的标记不遵循直接后裔模式，则可以省略。

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

easing: {新}

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

注意：您需要设置 useCSS: false 来强制在支持 translate3d 的浏览器中实现过渡。 可选：请访问 jQuery Easing 插件

direction: {已更改}

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

reverse: {新}

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

smoothHeight: {新}

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 插件

controlsContainer: {更新}

controlsContainer 是 FlexSlider 中更繁琐、可能更令人困惑的属性之一。首先，此属性不再需要作为绕过滑块动画中的 overflow: hidden 的解决方案。其次，该属性现在接受一个 jQuery 对象，这使您能够精确控制所需的对象。插件不再尝试猜测您选择的是哪个元素。

customDirectionNav: {新}

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

customDirectionNav 使用示例

sync: {新}

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

sync 使用示例

asNavFor: {新}

待添加描述。

itemWidth: {新}

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

itemMargin: {new}

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

minItems: {new}

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

maxItems: {new}

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

move: {new}

move 确定了轮播图中应动画显示多少个幻灯片。当其值为 0 时，滑块将动画显示可见幻灯片的数量。如果给出任何大于 0 的值，则滑块将在每个动画间隔中动画显示轮播图中的相应数量个幻灯片。

提示：如果值大于可见幻灯片的数量，则将忽略 move 属性，这可以用于响应式设计。

added: {new}

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

removed: {new}

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

allowOneSlide: {new}

布尔值。是否希望 FlexSlider 在只有一个幻灯片时按常规初始化。

rtl: {new}

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

isFirefox: {new}

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

levmyshkin / flexslider

维护者

详细信息