Slick.js и несколько Twitter Bootstrap Модальные Windows

Question

У меня есть несколько модальных окон и внутри есть слайдеры slick.js. Проблема заключается в том, что слайдер не отображается, как будто он не имеет высоты, и вам нужно подождать некоторое время или нажать на маркеры для отображения изображения.

Одно решения, которое я получил, чтобы добавить изменение размера(), когда модальный показано:

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

}) 

Но это только решает проблему для слайдера одного модальных окон. Если вы нажмете на другой модальный, слайдер снова не появится. Вот JS скрипку:

http://jsfiddle.net/vanduzled/nv446jgm/2/

Answer 1

Эй человек я думаю, что ваше решение на самом деле очень хороший.

я изменил его немного, поэтому я применить пятно карусели, когда модальный показано:

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

}) 

Answer 2

мне удалось получить эту работу с несколькими модальными окнами со следующим:

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

Answer 3

выше решение также работало, но оно не было гладким. Попробуйте это, он работает как шарм.

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