如何为Foundation Orbit滑块设置起始幻灯片

Question

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

文档中没有关于设置起始幻灯片的内容，在HTML中第二张幻灯片上添加活动类也无法解决问题。

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

Answer 1

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

代码：

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

演示：http://jsbin.com/ekarucuc/1/edit

Answer 2

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

1. 添加此行 self._goto(settings.start_slide, true); 在＆＃34; self.init ＆＃34;的最后功能
2. 在 Foundation.libs.orbit 在＆＃34; 设置中＆＃34;列表，添加此新设置 start_slide: 0 默认情况下始终在第一张幻灯片上开始。
3. 现在，重置您想要的起始幻灯片的参数： <ul data-orbit data-options="start_slide:1;">。

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

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

Answer 3

我正在寻找类似的东西，但无法使用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;
}

Answer 4

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

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