Slick Slider loaded with display:none creates bad initiation

Question

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:

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

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'); 
});

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.

Answer 1

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

Answer 2

Use the following on the outer container instead of display:none

height: 0px; overflow-y: hidden;

Works as intended :)