我使用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>

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

我试着把这些行的CSS，但它不工作，滑块是完全隐藏：

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

我该怎么修呢？