I have multiple modal window and inside have slick.js sliders. The problem is that the slider doesn't show up as if it doesn't have any height and you have to wait for awhile or click on the bullets for the image to show up.

One solution I got was to add a resize() when the modal is shown:

$('.modal').on('shown.bs.modal', function (e) {
  $('.carousel').resize();

})

But this only solves the issue for one modal window's slider. If you click on the other modal, the slider will not show up again. Here's a js fiddle:

/

I have multiple modal window and inside have slick.js sliders. The problem is that the slider doesn't show up as if it doesn't have any height and you have to wait for awhile or click on the bullets for the image to show up.

One solution I got was to add a resize() when the modal is shown:

$('.modal').on('shown.bs.modal', function (e) {
  $('.carousel').resize();

})

But this only solves the issue for one modal window's slider. If you click on the other modal, the slider will not show up again. Here's a js fiddle:

http://jsfiddle/vanduzled/nv446jgm/2/

• javascript
• jquery
• html
• css
• twitter-bootstrap

3 Answers 3

I managed to get this to work with multiple modal windows with the following:

$('.modal').on('shown.bs.modal', function (e) {
    $('.product-slider').slick("setPosition", 0);
});

above solution also worked but it not smooth try this it work like charm

.modal {
    display: block;
    visibility: hidden;
    overflow-y: hidden;
}
.modal.in {
    visibility: visible;
}

Hey man i think your solution is actually a very good one.

I changed it slightly, so i apply the slick carousel when the modal is shown:

$('.modal').on('shown.bs.modal', function (e) {
  $('.carousel').slick();

})