jQuery Slick Slider 加载了 display:none 会导致错误的启动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26677649/
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
Slick Slider loaded with display:none creates bad initiation
提问by David Lamm
I've got a gallery of thumbs and a Slick slider in a layer on top (z-index), hidden through css with display:none. When clicking on of the thumbs the display setting changes to block and the slider shows, But: The width/height/left/right etc of the slides are never calculated, check out this fiddle:
我在顶部（z-index）的图层中有一个拇指画廊和一个 Slick 滑块，通过 css 隐藏，显示：无。单击拇指时，显示设置更改为阻止，并且滑块显示，但是：永远不会计算幻灯片的宽度/高度/左/右等，请查看此小提琴：
http://jsfiddle.net/5eceg5yd/1/
http://jsfiddle.net/5eceg5yd/1/
html:
html：
<a href="#">show slider</a>
<div id="addressesList">
<div class="addressBox">
<p>Mrs Name
<br>Address1
<br>London SE15 4DH
<br>United Kingdom
<br>
</p>
</div>
<div class="addressBox">
<p>Mrs Name
<br>Address 2
<br>New York SE15 4DH
<br>United States of America
<br>
</p>
</div>
<div class="addressBox">
<p>Mrs Name
<br>Address3
<br>London SE15 4DH
<br>United Kingdom
<br>
</p>
</div>
</div>
css:
css：
#addressesList {
display: none
}
jQuery:
jQuery：
var slider = $('#addressesList').slick({
});
$('a').on("click", function() {
$('#addressesList').css('display', 'block');
});
Its as if the slider is loaded with display: none, nothing get calculated. Maybe its completly obvious that this should happen but I cant figure out how to create a "lightbox" kind of slider without this working.
就好像滑块加载了 display: none，什么都没有计算。也许这很明显应该发生，但我无法弄清楚如何在没有这个工作的情况下创建一个“灯箱”类型的滑块。
回答by simey.me
http://jsfiddle.net/5eceg5yd/8/
http://jsfiddle.net/5eceg5yd/8/
I updated your fiddle with the code to fix this:
我用代码更新了你的小提琴来解决这个问题：
$('#addressesList').get(0).slick.setPosition();
update:
更新：
$('.your-element').slick('setPosition');
is better for newer releases, as mentioned here: https://github.com/kenwheeler/slick#methods
更适合较新的版本，如此处所述：https: //github.com/kenwheeler/slick#methods
回答by Ghost1
Use the following on the outer container instead of display:none
在外部容器上使用以下内容而不是 display:none
height: 0px; overflow-y: hidden;
高度：0px；溢出-y：隐藏；
Works as intended :)
按预期工作:)
