javascript 当页面完全加载时初始化 Slick Slider
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49239857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Initialize Slick Slider when page loads completely
提问by NekoLopez
I'm using Slick Slider with content in each slide (text and images):
我在每张幻灯片（文本和图像）中使用带有内容的 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>
The problem is when I load page, at the beginning Slick Slider looks like this with one slide above the other until it finishes load page and then it starts working:
问题是当我加载页面时，一开始 Slick Slider 看起来像这样，一张幻灯片在另一张上面，直到它完成加载页面，然后它开始工作：
I tried to put these lines on CSS but It doesn't work, the slider is completely hidden:
我试图将这些行放在 CSS 上，但它不起作用，滑块完全隐藏：
#misresenas{display:none;}
#misresenas .slick-initialized{display:block;}
How can I fix it?
我该如何解决？
回答by Rajan Benipuri
Here you go. Replace $(document).ready()with $(window).load()function.
干得好。替换$(document).ready()为$(window).load()函数。
<script type="text/javascript">
$(window).on('load', function() {
$("#misresenas").slick({
arrows:false,
autoplay:true
});
});
</script>
回答by SpaceDogCS
That's the correct code
这是正确的代码
#misresenas{display:none;}
#misresenas.slick-initialized{display:block;}
