Question

Orbit内置了子弹导航系统。我不想使用那些项目符号在幻灯片之间导航，而是想在页面上的导航菜单中使用项目来做同样的事情。是否有一种优雅的方式基本上替换子弹的一系列div，以便当我点击我的一个div时它会导致Orbit滚动到适当的幻灯片？创建我自己的内容滑块会更明智吗？如果您有任何建议，请提前致谢。

Answer 1

我一直在寻找一种方法来做到这一点 - 看起来这应该是建立在轨道上以获得更大的灵活性。

我快速查看并使用orbit 1.4.0调整了此解决方案https://github.com/zurb/foundation/issues/118/。

您可以使用您喜欢的任何结构导航：

<div id="custom-orbit-nav">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

然后使用jquery绑定导航div，并使用轨道函数更改幻灯片索引，这是我的初始化代码：

$("#featured").orbit();
$("#custom-orbit-nav div").click(function() {
    var myIndex = $(this).index();
    $(this).addClass("active");
    $("#featured").trigger("orbit.stop").trigger("orbit.goto", [myIndex]);
    return false;
});

Answer 2

确保在设置Orbit时启用了项目符号。这看起来像是：

$(document).ready(function() {
  $("#yourOrbitElement").orbit({
    bullets: true
  });
});

然后，使用CSS，使用CSS将项目符号设置为visibility: hidden;。

然后，当你使用jquery的.click()实际点击其他内容时，你只需要愚弄Orbit认为已经点击了子弹。这可能看起来像：

$(".yourNavElements").click(function(){ //when you click on your nav element
  $("#theAppropriateBullet").click();   //auto-click on the corresponding bullet
});

为此，您需要一些方法来跟踪哪个导航按钮控制哪个子弹。我在每个导航按钮的data属性中存储了索引编号，然后在:contains()匹配索引的目标项目符号中存储了索引。

Answer 3

我只花了很多时间，因为我花了更多的时间来承认自己想要解决这个问题。基金会/轨道现在（不确定，因为这是我第一次尝试它）现在支持开箱即用的深层链接。以防其他人像我一样偶然发现：http://foundation.zurb.com/docs/components/orbit.html

对于Orbit，使用div而不是子弹

3 个答案: