zurb基金会轨道错误

Question

不知道我的图像滑块在"支持"选项卡部分发生了什么，它没有正确显示，它剪掉了一半，看起来很奇怪。主图像滑块很好。但是，当你突然检查元素时，"支持"轨道图像滑块看起来很正常。这与基础框架有关。

这里有一个查看错误的链接：http://www.omegadesignla.com/virtual/

和一些html:

<div class="content" id="panel6">
   <div class="row">
       <div class="large-4 columns">
           <h3> OFLVS Contact Info:</h3>
<ul>
   <li>Student Support</li>
    <li>Parent Support</li>
    <li>Support links and resources</li>
</ul>
       </div>
       <div class="large-8 columns">
          <ul class="example-orbit" data-orbit>
              <li>
                <img src="imgs/flash3.jpg" alt="slide 1" />
                <div class="orbit-caption">
                  Caption One.
                </div>
              </li>
              <li>
                <img src="imgs/flash12.jpg" alt="slide 2" />
                <div class="orbit-caption">
                  Caption Two.
                </div>
              </li>
              <li>
                <img src="imgs/flash9.jpg" alt="slide 3" />
                <div class="orbit-caption">
                  Caption Three.
                </div>
              </li>
        </ul>
       </div>
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>

javascript:

$(document).foundation({
    tab: {
      callback : function (tab) {
        $(document).foundation('reflow');
      }
    },
  orbit: {
      pause_on_hover: false,
      timer_speed: 6000
  }
});

Answer 1

我认为您的错误源于轨道滑块位于选项卡内容部分。我在选项卡部分的范围滑块上也出现了类似的错误。

尝试在JS文件中使用如下标签回调来回流javascript：

$(document).foundation({
    tab: {
      callback : function (tab) {
        $(document).foundation('orbit', 'reflow');
      }
    }
  });

编辑：我已经更正了我的答案，并添加了一个工作小提琴。