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.
display:none;
... one way you may be able to overcome this is to run this command after thedisplay:block;
-$('#addressesList').get(0).slick.setPosition();
– simey.me Oct 31 '14 at 17:26