Bootstrap模态框中滑块无法加载图片，响应式视图下resize方法失效

我之前也碰到过一模一样的问题，本质原因是模态框初始状态是隐藏的，滑块初始化/渲染时无法获取到容器的真实尺寸，只有当窗口resize时，滑块才会重新计算容器尺寸并加载图片。而你现在用的全局$(window).resize()在响应式视图下无效，大概率是因为响应式下窗口本身尺寸没变化，或者这个全局事件没有触发滑块内部的尺寸重计算逻辑。

给你几个针对性的解决方案，按靠谱程度排序：

1. 利用Bootstrap模态框的shown.bs.modal事件初始化/刷新滑块 #

Bootstrap模态框提供了shown.bs.modal事件，这个事件会在模态框**完全显示（动画结束）**后触发，此时模态框内的容器尺寸已经完全确定，这时候再初始化滑块或者触发滑块的重绘，就能确保滑块拿到正确的尺寸：

// 替换成你的模态框ID
$('#your-modal').on('shown.bs.modal', function() {
  // 这里替换成你的滑块选择器
  const $slider = $('.your-slider', this);
  
  // 如果是用的第三方滑块插件（比如Slick、Owl Carousel），调用它们的原生刷新方法
  // 比如Slick：$slider.slick('refresh');
  // 比如Owl Carousel：$slider.owlCarousel('refresh');
  
  // 如果没有插件原生方法，直接触发滑块的resize事件（比全局window resize更精准）
  $slider.trigger('resize');
});

这个方法从根源上解决了滑块初始化时容器尺寸未知的问题，比在分页点击时调用resize靠谱得多。

2. 分页点击时触发滑块的局部刷新，而非全局window resize #

如果你切换分页后滑块内容更新了，需要重新渲染，不要调用全局的$(window).resize()，而是直接触发滑块自身的重绘逻辑：

$(".cbp-pagination-item").on('click',function() {
  // 确保滑块已经存在于显示的模态框中
  const $slider = $('.your-slider:visible');
  
  // 调用滑块插件的刷新方法，或者触发局部resize
  $slider.trigger('refresh'); // 或者对应插件的方法，比如slick('refresh')
});

全局resize会触发页面上所有监听resize事件的组件，没必要，而且可能在响应式视图下因为窗口尺寸没变化，滑块内部的逻辑没执行。

3. 手动强制设置滑块容器尺寸 #

如果以上方法都无效，可以手动获取模态框内滑块容器的真实尺寸，强制设置给滑块后再触发重绘：

$('#your-modal').on('shown.bs.modal', function() {
  const $sliderContainer = $('.slider-container', this);
  const containerWidth = $sliderContainer.width();
  
  $('.your-slider', this)
    .width(containerWidth)
    .height($sliderContainer.height())
    .trigger('resize');
});

关键要点总结 #

• 避免在模态框隐藏状态下初始化滑块，一定要等模态框完全显示后再操作
• 优先使用滑块插件的原生刷新方法，而非全局window resize
• 针对分页切换这类交互，直接操作滑块本身，不要依赖全局事件

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