jquery - 如何使用 Foundation 4 将 Orbit 导航箭头移出容器？

Question

我正在使用 Orbit 显示一些文本重元素，并且箭头妨碍了我的文本。我厌倦了做任何花哨的 css33 来增加它们的透明度，因为我需要它在 Firefox for OS9 中看起来正确，我认为这意味着 Firefox 3...

那么有什么方法可以将箭头移出 Orbit 的容器吗？更好的是，如果在容器下方我有上一个箭头，然后是子弹，然后是下一个箭头？

Answer 1

这可以通过 CSS 完成。原生地，溢出：隐藏在 .orbit-container 上。如果您使 .orbit-container overflow:visible 然后将 overflow:hidden 添加到 .orbit-slides-container，幻灯片仍将被隐藏，但 UL 之外的任何内容都可以移动到您想要的任何位置。这是我的做法：

.orbit-container {
    overflow: visible !important;
}
.orbit-slides-container {
    overflow: hidden !important;    
}
.orbit-container .orbit-prev {
    margin-left: -50px;
}
.orbit-container .orbit-next {
    margin-right: -50px;
}

Answer 2

那么有什么方法可以将箭头移出 Orbit 的容器吗？更好的是，如果在容器下方我有上一个箭头，然后是子弹，然后是下一个箭头？

总有办法，有时并不那么容易。对于您的特定场景，只有在您精通 javascript 的情况下才会很容易。截至最新版本，4.1.5仍然不支持事件处理或回调。如果你想要支持你需要的东西，那么你真的需要修改foundation.orbit.js并做两件事：

1. 修改脚本文件，以便您可以将箭头写在您想要的位置
2. 修改脚本文件，以便您可以为next和prev操作挂钩事件。然后，您可以添加自己的上一个和下一个按钮，并将它们放置在您想要的任何位置。

现在没有简单的方法可以做到这一点。我实际上正在尝试提供一些支持回调的代码，仅仅是因为我们很快就会需要它们。然后我会将它提交给 Zurb (github)，看看他们将它合并到核心脚本中是否有意义。

Answer 3

我最近刚刚做了类似你所说的事情（我认为）。我将容器设置为幻灯片内的特定列宽，如果 Orbit 周围没有容器，Orbit 自然会占据页面的 100%。

我为每张幻灯片做了类似的事情。这里有一堆额外的标记，但我需要更好地控制幻灯片上的媒体查询。

   <div class="slideshow-wrapper">
     <ul id="home-slider" data-orbit data-options="timer_speed:2500; bullets:false;">
       <li data-orbit-slide="headline-1">
         <div class="row">
           <div class="large-10 column push-1">
             <div class="slider-content">   
               <div class="large-6 column text-center text-left">
                 <h2>Test</h2>
                 <h3>Test</h3>
                 <p>Test</p>
                 <a href="" class="large secondary button expand">LEARN MORE</a>
               </div>
             </div>
           </div>
         </div>
        </li>  
    </ul>
  </div>

那么有什么方法可以将箭头移出 Orbit 的容器吗？更好的是，如果在容器下方我有上一个箭头，然后是子弹，然后是下一个箭头？

我也为此苦苦挣扎了一分钟，您可以在第 3064-3076 行找到上一个/下一个按钮的 css。您可以尝试将 top 属性设置为 80%+ 以查看是否会将上一个和下一个箭头向下推到底部。

Answer 4

您可以使用它也可以使用 mouseenter mouseleave 并在动画之前停止

    $(document).ready(function () {
        $(".orbit-container").mouseenter(function () {
            $(".orbit-prev,.orbit-next").stop().animate({ 'opacity': '1' }, 400);
        }).mouseleave(function () {
            $(".orbit-prev,.orbit-next").stop().animate({ 'opacity': '0' }, 400);
        });
    });