Question

我在顶部的一个图层（z-index）中有一个拇指画廊和一个Slick滑块，通过css隐藏了display：none。点击拇指时，显示设置变为阻止，滑块显示，但是：从不计算幻灯片的宽度/高度/左/右等，请查看这个小提琴：

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：

#addressesList {
    display: none    
}

jQuery的：

var slider = $('#addressesList').slick({   
});

$('a').on("click", function() {
    $('#addressesList').css('display', 'block'); 
});

就好像滑块加载了display：none，没有得到任何计算。也许它完全显而易见，这应该发生，但我无法弄清楚如何创建一个＆＃34;灯箱＆＃34;没有这种工作的那种滑块。

Answer 1

http://jsfiddle.net/5eceg5yd/8/

我用代码更新了你的小提琴以解决这个问题：

$('#addressesList').get(0).slick.setPosition();

更新：

$('.your-element').slick('setPosition');

对于较新版本更好，如此处所述：https://github.com/kenwheeler/slick#methods

Answer 2

在外部容器上使用以下内容而不是display：none

身高：0px; overflow-y：hidden;

按预期工作：）

Slick Slider加载了display：none会导致错误的启动

2 个答案: