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 init上：

 $(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暂时显示初始化的所有内容

1 个答案: