Question

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

网站就在这里：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的高度问题（由于父容器隐藏它，动态添加等等。

实际上因为你检查元素它不起作用，当你检查元素浏览器的resize事件被解雇时

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

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

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

Zurb基金会的轨道滑块在我检查元素之前无法工作

2 个答案: