Question

我以一种非常简单的方式使用FlexSlider。然而，在它到达最终幻灯片并循环回到第一张幻灯片后，内容似乎是“快速”。到位，好像在CSS之前加载了滑块。

这是一个精简的例子：
http://aj2.w-interactive.com/mds-slider-test2.html

你会注意到滑块从第三张幻灯片回来后（你需要一直看着它），第一张幻灯片中的文字（它说的是＃34;我们提供你的文字）信任＆＃34;等...）最初加载没有样式，然后排序＆＃34;跳跃＆＃34;到位，好像最终为它加载了样式。但是第一次加载，在循环之前，它完全没问题。

这是来自页面底部的脚本：

＆＃13;

<!-- FlexSlider -->
  <script defer src="assets/js/jquery.flexslider.js"></script>

<script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
		slideshowSpeed: "4500",
		pausePlay: "true",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

＆＃13;

任何想法都将不胜感激。谢谢！

Answer 1

您的CSS未正确应用，因为您有多个具有相同ID的元素。

参考：http://www.w3schools.com/tags/att_global_id.asp

＆＃34; id属性指定HTML元素的唯一ID（该值必须在HTML文档中唯一）。＆＃34;

您的示例HTML

中有这个

<li>
    <div id="slides" class="bkgd1">
        <h1 class="fade">We Deliver Your Trust</h1>
        <h1 class="fade">Intermodal Drayage</h1>
        <h2 class="fade">Centrally Located Terminals</h2>
        <h2 class="fade">9 Locations Covering North America</h2>
    </div>
</li>
<li>
    <div id="slides" class="bkgd2">
        <h1 class="fade">Rail &amp; Steamship Interchange</h1>
        <h2 class="fade">Fully Customs Bonded</h2>
    </div>
</li>
<li>
    <div id="slides" class="bkgd3">
        <h1 class="fade">Dedicated Fleet &amp; Preferred Network</h1>
        <h2 class="fade">Real Time Dispatch Technology</h2>
        <h2 class="fade">Instant Proof of Delivery</h2>
    </div>
</li>

这是你的CSS

#slides h1

将这些ID更改为类（如此）

<div class="slides bkgd1">
<div class="slides bkgd2">
<div class="slides bkgd3">

相应地更改CSS选择器

.slides h1

然后它应该有用。

更多详情

FlexSlider会创建<div>元素的克隆，以便顺利循环和重复。当它创建克隆时，它会复制原始ID并附加＆＃34; _clone＆＃34;到最后。这实际上是您在骑行后返回第一张幻灯片时看到的内容。因此，您的CSS样式（#slides h1等）未被应用。

此外，仅仅添加#slides h1, #slides_clone h1是不够的，因为我在这个答案中提到了第一件事。 ID必须是唯一的。

Flex Slider似乎在CSS之前加载

1 个答案: