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

我认为您的错误源于轨道滑块位于标签内容部分的事实。我在标签部分中有一个范围滑块出现了类似的错误。

尝试使用tab callback在JS文件中回复javascript，如下所示：

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

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

zurb基础眼眶虫？

1 个答案: