0

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

4

3 回答 3

2

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

我快速浏览了一下并使用轨道 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函数改变幻灯片索引，这是我的初始化代码：

$("#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;
});
于 2013-02-23T03:10:39.530 回答
1

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

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

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

然后，您只需要欺骗 Orbit 使其认为当您实际使用 jquery 的.click(). 这可能看起来像：

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

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

于 2013-02-23T03:02:21.253 回答
0

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

于 2014-01-30T21:28:31.820 回答