Slick Slider, загруженный дисплеем: none создает плохое инициирование

У меня есть галерея больших пальцев и слайдер Slick в слое сверху (z-index), спрятанный с помощью css с дисплеем: none. При нажатии на большие пальцы настройки дисплея изменяются на блок, а слайдер показывает, но: Ширина/высота/левая/правая и т.д. Слайдов никогда не вычисляются, проверьте эту скрипту:

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

Как будто ползунок загружен дисплеем: none, ничего не вычисляется. Возможно, совершенно очевидно, что это должно произойти, но я не могу понять, как создать слайдер "лайтбоксов" без этой работы.