Bootstrap模态框内Slick slider初始加载不显示问题

• 集成环境：Bootstrap v2.3 模态框 + Slick Slider v1.9.0，使用带底部缩略图的滑块同步（Slider Syncing）模式实现轮播
• 异常表现：点击按钮唤起模态框时，Slick轮播无法第一时间正常渲染，必须手动点击轮播箭头、或在模态框内做任意交互操作后，轮播才会正常展示
• 预期目标：点击按钮打开模态框后，轮播可立即加载正常显示
• 已尝试无效方案：监听模态框shown事件、调用Slick的setPosition方法修复，均未达到效果
• 当前临时处理方案：通过自定义CSS覆盖模态框默认显示属性绕过问题
• 附：已提供问题复现所需的完整HTML、CSS、JS代码及在线演示案例

Slick渲染滑块尺寸、位置时，依赖父容器的实际可见宽高参数。如果初始化Slick时父容器处于display: none的隐藏状态，Slick拿到的容器尺寸为0，就会出现内容塌陷、不显示的问题。
Bootstrap v2.3的shown事件触发时机早于模态框入场动画完全结束、DOM尺寸稳定的节点，且滑块同步模式下存在主轮播、底部缩略图轮播两个独立的Slick实例，仅在事件触发时单次调用单实例的setPosition方法，无法覆盖两个实例的重绘逻辑，因此之前的修复方案不生效。

方案1：延迟触发双实例重绘（推荐，无侵入性） #

不要在页面加载时就初始化隐藏模态框内的Slick，若必须提前初始化，可在模态框shown事件中增加短延迟，等模态框尺寸完全稳定后，同时对两个Slick实例调用重绘方法：

// 注意Bootstrap v2.3的模态框显示完成事件名是 `shown`，不要混用高版本的`shown.bs.modal`
$('#targetModal').on('shown', function () {
  // 50ms短延迟等待CSS动画完全执行完毕，不需要更长时间
  setTimeout(function () {
    // 两个Slick实例都要执行setPosition，不要遗漏缩略图轮播
    $('.main-slick-slider').slick('setPosition');
    $('.thumbnail-slick-slider').slick('setPosition');
  }, 50);
});

方案2：调整模态框隐藏方式（即当前临时方案的规范化实现） #

放弃用display: none隐藏模态框，改用屏幕外定位+透明度的方式做隐藏，让Slick初始化时就能拿到正确的容器尺寸，不需要额外写JS重绘逻辑：

/* 覆盖Bootstrap v2.3默认模态框隐藏样式 */
.modal {
  display: block !important;
  position: fixed;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s linear;
}
/* 模态框激活状态样式 */
.modal.in {
  top: 50%;
  left: 50%;
  opacity: 1;
  visibility: visible;
}

注意如果用这个方案，需要同步调整模态框的遮罩层显示逻辑，避免遮罩层提前出现。

方案3：调整Slick初始化时机 #

不要在页面加载完成后就初始化模态框内的Slick，改成第一次点击模态框触发按钮时，先初始化Slick，再触发模态框弹出，从根源避免在隐藏容器内初始化Slick导致的尺寸计算错误。

内容的提问来源于stack exchange，提问作者clarkf