javascript - 需要时间绑定(bind)的 jQuery slider 插件

Question

我正在使用 Flexslider显示元素及其各自的图像。

发生的情况是，在页面加载时，所有 li 都像带元素符号的列表一样首先显示。一秒钟后，插件被应用。

我尝试通过 CSS 隐藏原始列表(未应用插件)但没有成功。

编辑:我也试过document.ready。这也没有帮助。

编辑:我也同意建议隐藏内容的解决方案，除非应用插件。

如果需要任何其他详细信息，请告诉我。对不起，英语不是我的母语。

这是我的代码。

HTML:

<div id="slider" class="flexslider">
    <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
    </ul>
</div>

<div id="carousel" class="flexslider">
      <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

JS:

$(window).load(function() {

$('#carousel').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   itemWidth: 210,
   itemMargin: 5,
   asNavFor: '#slider'
});

$('#slider').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   sync: "#carousel"
});

});

Answer 1

尝试使用文档就绪事件而不是窗口加载 -

jQuery(document).ready(function ($) {