在 Orbit 中使用 div 而不是项目符号答案

【问题标题】：Use divs instead of bullets for Orbit在 Orbit 中使用 div 而不是项目符号
【发布时间】：2013-02-22 17:05:39
【问题描述】：

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

【问题讨论】：

Foundation 4 应该会在一周内发布，所以谁知道 Orbit 的更新是否会包含更简单的自定义......

标签： jquery zurb-foundation orbit

【解决方案1】：

我也在寻找一种方法来做到这一点 - 看起来这可能应该内置在轨道上以获得更大的灵活性。

我快速浏览了一下并使用轨道 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，用orbit函数改变slide index，下面是我的初始化代码：

$("#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;
});

【讨论】：

很好的解决方案。这使您可以在一个页面上拥有多个轨道，而我的没有。谢谢！

【解决方案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() 的项目符号定位为匹配索引。

【讨论】：

【解决方案3】：

只是一个快速的仅供参考，因为我花了比我愿意承认的更多的时间试图自己解决这个问题。 Foundation/Orbit 现在（不确定从什么时候开始，这是我第一次尝试）现在支持开箱即用的深度链接。以防其他人像我一样偶然发现：http://foundation.zurb.com/docs/components/orbit.html

【讨论】：