页面完全加载时初始化 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>