Zurb 基金会中的轨道滑块在我检查元素之前不起作用

Question

使用带有 Orbit 滑块的 Zurb Foundation 5 来构建我的网站。我在模态中设置了一个滑块，但它只显示图像的顶部和幻灯片导航，直到我检查元素，然后显示整个滑块。帮助？

网站在这里： http://www.parker-gibson.com/testing/foundation/index.html当您单击"这就是我所做的"部分中的第一个图像时，会显示有问题的滑块。提前感谢！相关代码如下...

<div id="mqm" class="reveal-modal" data-reveal>
  <div class="row">
     <div class="large-4 large-push-8 columns">
        <h3>This is a test</h3>
        <div class="project-description">
        <p>This is a test. Lorem ipsum dolor sit amet...</p>
        </div>
     </div>
     <div class="large-8 large-pull-4 columns">
        <ul data-orbit>
        <li><img src="http://placesheen.com/725/400" alt="sheen1"></li>
        <li><img src="http://placesheen.com/725/400" alt="sheen2"></li>
        <li><img src="http://placesheen.com/725/400" alt="sheen3"></li>
        </ul>
     </div>
        <a class="close-reveal-modal" href="#">x</a>
  </div>
</div>

Answer 1

此脚本修复了问题...

<script>
$(document).on('opened', '[data-reveal]', function () {
var modal = $(this);
$(window).trigger('resize');
});
</script>

Answer 2

我只在 Orbit 最初不可见时才看到 Orbit 的高度问题（由于父容器隐藏它、动态添加等）。

其实它不起作用是因为你检查元素，当你检查元素浏览器的调整大小事件被触发时

调整

浏览器大小（甚至调整 Web 控制台）将导致 orbit 插件添加正确的高度属性并使一切正常。

解决此问题，手动触发浏览器大小调整事件

$(document).foundation('orbit');
$(window).resize();