【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2016-03-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-25
      相关资源
      最近更新 更多