Slick.js and multiple Twitter Bootstrap Modal Windows

Slick.js and multiple Twitter Bootstrap Modal Windows

本文关键字：Bootstrap Modal Windows Twitter multiple js and Slick      更新时间：2023-09-26

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

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

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

但这只解决了一个模式窗口的滑块的问题。如果单击其他模态，滑块将不会再次显示。这是一个js小提琴：

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

我设法让它与以下多模式窗口一起工作：

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

上面的解决方案也起作用，但它并不顺利，尝试一下它的工作方式就像魅力

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

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

我稍微改变了一下，所以当模式显示时，我应用了光滑的旋转木马：

$('.modal').on('shown.bs.modal', function (e) {
  $('.carousel').slick();
})
相关文章：