Flexslider2 显示初始化时的所有内容

Question

当我打开我的网站时，我的 Flexslider 2 会短暂显示我滑块中的所有内容，在本例中是三个词，然后逐渐消失。

我脑子里有这个：

   <!-- FlexSlider -->
  <script defer src="flexslider/jquery.flexslider.js"></script>


<!-- FLEXSLIDER -->
  <script type="text/javascript">

  // Can also be used with $(document).ready()
    // start: function(slider) { slider.removeClass('loading');  }



    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "fade"


      });

    });



 </script>

这是我的 Flexslider HTML:

<div class="row" >
<div class="medium-12 large-12 columns" id="nopadding">
  <div class="content">
    <div class="parallax-bg">

      <div class="title">

            <!-- Place somewhere in the <body> of your page -->
              <div class="flexslider loading">
                <ul class="slides">

                  <li>
                    <p>Menschen</p>
                  </li>

                  <li>
                    <p>Werte</p>
                  </li>

                  <li>
                    <p>Fähigkeiten</p>
                  </li>



                </ul>
              </div>

      </div>

    </div>
  </div>
</div>
</div>

非常感谢

雅各布

Answer 1

在您的 CSS 中，首先尝试隐藏幻灯片中的所有元素，然后在显示滑块时显示它们：

.slides li p { display: none; }

并且在 flexslider 初始化上：

 $(window).load(function() {
   $('.flexslider').flexslider({
     animation: "fade",
     start: function() {
       $('.slides li p').show();
     }
   });

 });

我还查看了您的代码，发现您在同一页面中使用了 jquery 的三个版本。你不应该那样做。一个就够了。我指的是这些：

<script src="js/jquery-2.1.4.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script src="bower_components/jquery/dist/jquery.js"></script>

Flexslider2 显示初始化时的所有内容

Flexslider2 shows for a moment all content on initialisation

jquery

flexslider