Question

我使用 Zurb Fondation Framework 该框架附带 orbit image slider 滑块非常好，但我无法解决一个问题：

当第一次加载页面（带滑块）时，滑块中的所有图像将垂直堆叠1-2秒。然后滑块加载，看起来没问题。

请在第一次加载浏览器时建议正确显示滑块。

滑块代码：

<div class="row">
    <div class="large-12 columns">
      <div class="row">
        <div class="large-12 hide-for-small">

          <div class="orbit-container"><div id="featured" data-orbit="" class="orbit-slides-container" style="height: 417px;">
              <img src="http://placehold.it/1200x500&amp;text=Slide Image 1" alt="slide image" class="active" style="z-index: 4; margin-left: 0%;">
              <img src="http://placehold.it/1200x500&amp;text=Slide Image 2" alt="slide image" class="" style="z-index: 2; margin-left: 100%;">
              <img src="http://placehold.it/1200x500&amp;text=Slide Image 3" alt="slide image" class="" style="z-index: 2; margin-left: 100%;">
            </div><a href="#" class="orbit-prev"><span></span></a><a href="#" class="orbit-next"><span></span></a><div class="orbit-timer paused"><span></span><div class="orbit-progress" style="width: 0%;"></div></div><div class="orbit-slide-number"><span>1</span> of <span>3</span></div><div class="orbit-bullets-container"><ol class="orbit-bullets"><li data-orbit-slide="0" class="active"></li><li data-orbit-slide="1" class=""></li><li data-orbit-slide="2" class=""></li></ol></div></div>

      </div>
    </div>

Zurb Foundation版本：5.0

谢谢，

Answer 1

由于Orbit通过Javascript执行，因此在它开始之前您可能会看到您的图像或内容全部堆叠在一起。为了避免这种情况，你可以使用Orbit的一个属性：它会在执行后添加一个.orbit类，这意味着你可以使用特定样式来定位你的div #features，这些样式将在添加类时被覆盖。

例如，如果我们希望Orbit使用微调器加载一个简单的浅灰色屏幕，那么CSS将如下所示：

CSS：

#featured { background: url(spinner.gif) center center #f4f4f4 no-repeat; height: 300px; }
#featured img { display: none; }

#featured.orbit { background: none; }
#featured.orbit img { display: block; }

我们默认隐藏图像，并使用微调器为#featured块提供固定的高度和背景。一旦Orbit加载，图像就会显示出来，我们会删除该背景。

取自：http://foundation.zurb.com/docs/v/3.2.5/orbit.php

Answer 2

以为我会为基金会6发布更新的答案。

目前，文档中的示例代码如下：

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
<ul class="orbit-container">
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
<li class="is-active orbit-slide">
  <div>
    <h3 class="text-center">1: You can also throw some text in here!</h3>
    <p class="text-center">Achieve an animation-free Orbit with the data attribute data-use-m-u-i="false"</p>
    <h3 class="text-center">This Orbit slider does not use animations.</h3>
  </div>
</li>

这是第一张幻灯片的代码。

为了消除这种堆叠效应，我只是隐藏了所有幻灯片，但第一个。

.orbit-slide {
  display: none;
}

.orbit-slide.is-active {
  display: block;
}

其他幻灯片显示为脚本显式设置它们显示：block;

Answer 3

对于基金会6，我将帕特里克的其他答案合并为一个，并且它完美地加载。

.orbit-slide { 
  opacity: 0;
  display:none;
} 
.orbit-slide.is-active { 
  opacity: 1; 
  display: block;
}

只是在旋转木马下方使用不透明度加载的空白区域，看起来很难看。

编辑：由于我的旋转木马上只有两张幻灯片，它似乎可以正常工作，但这显示了最后一张幻灯片并冻结了旋转木马。还在寻找解决方案和jquery show / hide不是......

Orbit-Slider首次显示浏览器加载时垂直堆叠的所有图像

3 个答案: