页面完全加载时初始化Slick Slider

Question

我使用Slick Slider在每张幻灯片中添加内容（文本和图片）：

<div id="misresenas">
   <div class="resena">
      <!-- my content -->
   </div>
   <div class="resena">
      <!-- my content -->
   </div>
   <div class="resena">
      <!-- my content -->
   </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      $("#misresenas").slick({
        arrows:false,
        autoplay:true
      });
  });
</script>

问题是当我加载页面时，Slick Slider看起来像这样，一张幻灯片在另一张上面，直到它完成加载页面然后它开始工作：

我试图将这些行放在CSS上，但它不起作用，滑块完全隐藏：

#misresenas{display:none;}
#misresenas .slick-initialized{display:block;}

我该如何解决？

Answer 1

你走了。将$(document).ready()替换为$(window).load()函数。

<script type="text/javascript">
  $(window).on('load', function() {
     $("#misresenas").slick({
       arrows:false,
       autoplay:true
     });
  });
</script>

Answer 2

这是正确的代码

#misresenas{display:none;}
#misresenas.slick-initialized{display:block;}