如何为 Foundation Orbit 滑块设置起始滑块答案

【问题标题】：How to set starting slide for Foundation Orbit slider如何为 Foundation Orbit 滑块设置起始滑块
【发布时间】：2013-12-18 13:27:14
【问题描述】：

我正在使用 Foundation 的 Orbit 滑块来显示房屋的等级，第一张幻灯片始终是地下室，但这不是我们想要开始的幻灯片。我们希望页面首先显示一楼，即第二张幻灯片。我们正在使用 Foundation 4。

文档中没有关于设置起始幻灯片和在 HTML 中的第二张幻灯片上添加活动类的任何内容也不能解决它。

查看我的 JSBin 示例：http://jsbin.com/IVisAWA/2/edit。这里的起始幻灯片是“0”，但我希望它是“1”。

【问题讨论】：

【解决方案1】：

您可以在初始化轨道滑块后执行此操作。

$('#orbit-slide').data('orbit-instance')._goto(indexSlide, true);

【讨论】：

【解决方案2】：

我正在寻找类似的东西，但无法使用 Fabricio 的解决方案，因为我没有更改 Foundation.orbit.js 文件的空间。

我最终在初始化 Orbit 时启用了项目符号点导航项目，然后在适当的项目符号点上触发“点击”。但我实际上并不想显示项目符号，所以我用一些 CSS 将它们隐藏起来。

类似：

var button = $('div.orbit-container').find('li[data-orbit-slide="1"]');
button.trigger('click');

还有：

div.orbit-bullets-container {
    display: none;
}

【讨论】：

【解决方案3】：

您可以在 foundation.orbit.js 中添加两行代码，以便按照自己的方式使用和自定义：

添加此行 self._goto(settings.start_slide, true); 在“self.init”函数的末尾。
在 Foundation.libs.orbit 在“settings”列表中，添加这个新设置 start_slide: 0 默认情况下始终从第一张幻灯片开始。
现在，重置您想要的起始幻灯片的参数： <ul data-orbit data-options="start_slide:1;">。

知道您的列表从 0 开始，第二项应该是 1：HTML 幻灯片列表中的 data-options="start_slide:1;"。

现在您甚至可以在同一页面中使用两张或多张幻灯片，一张从第一张幻灯片开始，另一张从您想要的位置开始。

【讨论】：

【解决方案4】：

我找不到任何内置选项，您可以使用orbit:ready 事件回调并强制单击下一个元素。

代码：

$("ul").on("orbit:ready", function(event) {
   $(".orbit-next").click();
});

【讨论】：