0

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

这是查看错误的链接： 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
  }

});
4

1 回答 1

1

我认为您的错误源于轨道滑块位于选项卡内容部分的事实。我在选项卡部分中的范围滑块有类似的错误。

尝试使用标签回调在 JS 文件中重排 javascript，如下所示：

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

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

于 2015-03-17T20:42:21.417 回答