zurb 基金会轨道错误？

Question

不知道我在 'support' 选项卡部分下的图像滑块是怎么回事，它没有正确显示，它切掉了一半，看起来很奇怪。主图像滑块很好。但是，当您突然检查元素时，'support' 轨道图像滑块看起来很正常。这是基础框架。

这里有一个 link 可以查看错误： 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

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

尝试使用 tab callback 重排 JS 文件中的 javascript，如下所示：

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

编辑：我更正了我的答案并添加了 working fiddle。

zurb 基金会轨道错误？

zurb foundation orbital bug?

orbit

zurb-foundation-5