Question

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

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

Answer 1

这可以用CSS完成。本机地，溢出：隐藏在.orbit容器上。如果你使.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并做两件事：

修改脚本文件，以便您可以在想要它们的地方写下箭头
修改脚本文件，以便您可以挂接下一步和上一步操作的事件。然后，您可以添加自己的上一个和下一个按钮，并将它们放置在您想要的位置。

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

Answer 3

你可以使用它也使用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);
        });
    });

Answer 4

我刚刚做了类似你所说的话（我想）。我将容器设置为幻灯片内部的特定列宽，如果轨道周围没有容器，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行的prev / next按钮的css。您可以尝试将top属性设置为80％+，以查看是否将上一个和下一个箭头向下推到底部。

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

4 个答案: