Image Zurb Orbig滑块内容与图像重叠

这是一个网格中的单个图像，它位于所有其他图像之上，我真的不知道为什么，需要一些帮助

这是只有在加载页面时才会发生的事情

我使用ZURB基金会轨道滑块，我的页面保持这样的一个部分：

<section class="container">
    <div class="row">
        <div class="two columns">
        </div>
        <div class="eight columns">
            <div id="featured">
                <div class="content">
                    <ul class="block-grid four-up">
                        <li><a href="http://wazzup.wedoitforfun.org/" target="_blank" class="sb xlarge flat glossy wazzup"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray nAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray eAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray wAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray aAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray pAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray pAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray sAppIcon"></a></li>
                    </ul>
                </div>
                <div class="content">
                    <ul class="block-grid four-up">
                        <li><a href="#" class="sb xlarge flat light-gray glossy about"></a></li>
                        <li><a href="http://www.scoop.it/t/tooltip" target="_blank" class="sb xlarge flat light-gray glossy tooltip"></a></li>
                        <li><a href="http://www.scoop.it/t/innovatus" target="_blank" class="sb xlarge flat light-gray glossy innovatus"></a></li>
                        <li><a href="http://whereismycode.pintolaranja.com" target="_blank" class="sb xlarge flat light-gray glossy whereismycode"></a></li>
                        <li><a href="http://scrumplicity.net" target="_blank" class="sb xlarge flat light-gray glossy scrumplicity"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="two columns">
        </div>          
    </div>
</section>

    $(".right").click(function(){
    if ($("#infoPanel").is(':hidden')){
        $("#appsPanel").hide();
        $("#infoPanel").show();
    }
    else{
        $("#infoPanel").hide();
        $("#appsPanel").show();         
    }
});

$(".left").click(function(){
    if ($("#infoPanel").is(':hidden')){
        $("#appsPanel").hide();
        $("#infoPanel").show();
    }
    else{
        $("#infoPanel").hide();
        $("#appsPanel").show();         
    }
});

我得到的一直是第一个网格上的第二个图像被第二个网格上的第二个图像替换。 也就是说，当我加载页面时，图标不会显示，而是显示工具提示图标

---

然后，如果我单击滑块上的箭头进行导航，所有这些都将消失，所有图标将永远位于正确的位置，不再重叠。

好的，下面是我找到的答案。 我不太喜欢它，但它奏效了

默认情况下，我将下幻灯片设置为隐藏，然后执行以下操作：

<section class="container">
    <div class="row">
        <div class="two columns">
        </div>
        <div class="eight columns">
            <div id="featured">
                <div class="content">
                    <ul class="block-grid four-up">
                        <li><a href="http://wazzup.wedoitforfun.org/" target="_blank" class="sb xlarge flat glossy wazzup"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray nAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray eAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray wAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray aAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray pAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray pAppIcon"></a></li>
                        <li><a href="#" class="sb xlarge flat glossy light-gray sAppIcon"></a></li>
                    </ul>
                </div>
                <div class="content">
                    <ul class="block-grid four-up">
                        <li><a href="#" class="sb xlarge flat light-gray glossy about"></a></li>
                        <li><a href="http://www.scoop.it/t/tooltip" target="_blank" class="sb xlarge flat light-gray glossy tooltip"></a></li>
                        <li><a href="http://www.scoop.it/t/innovatus" target="_blank" class="sb xlarge flat light-gray glossy innovatus"></a></li>
                        <li><a href="http://whereismycode.pintolaranja.com" target="_blank" class="sb xlarge flat light-gray glossy whereismycode"></a></li>
                        <li><a href="http://scrumplicity.net" target="_blank" class="sb xlarge flat light-gray glossy scrumplicity"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="two columns">
        </div>          
    </div>
</section>

    $(".right").click(function(){
    if ($("#infoPanel").is(':hidden')){
        $("#appsPanel").hide();
        $("#infoPanel").show();
    }
    else{
        $("#infoPanel").hide();
        $("#appsPanel").show();         
    }
});

$(".left").click(function(){
    if ($("#infoPanel").is(':hidden')){
        $("#appsPanel").hide();
        $("#infoPanel").show();
    }
    else{
        $("#infoPanel").hide();
        $("#appsPanel").show();         
    }
});