Slick.js 和多个 Twitter Bootstrap 模态窗口

Question

我有多个模态窗口，里面有 slick.js 滑块。问题是滑块没有显示，就好像它没有任何高度一样，您必须等待一段时间或单击项目符号才能显示图像。

我得到的一个解决方案是在显示模态时添加一个 resize() ：

$('.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) {
    $('.product-slider').slick("setPosition", 0);
});

Answer 2

嘿，伙计，我认为你的解决方案实际上是一个非常好的解决方案。

我稍微改变了它，所以当显示模式时我应用了光滑的轮播：

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

})