为什么Slick Slider会将页面图片拉伸至数十万像素宽度？

该异常是Slick Slider经典的宽度计算bug，对应修复方案如下： #

• 调整外层容器布局属性，将.testimonial的display: inline-flex改为display: flex。inline-flex容器的宽度计算逻辑会干扰Slick的可用空间判断，是引发超宽拉伸的最常见原因。
• 补充缺失的宽度约束规则，避免容器和图片溢出：

.testimonial__item {
  width: 100%;
}
.testimonial__img img {
  max-width: 100%;
  height: auto;
}

• 修改Slick初始化配置，关闭可变宽度适配，强制按容器宽度计算slide尺寸：

$('.slider').slick({
  infinite: true,
  speed: 800,
  slidesToShow: 1,
  variableWidth: false
});

• 若上述操作后仍有问题，将Slick初始化逻辑延后到页面所有资源加载完成后执行，避免图片未加载完成时Slick提前计算得到错误宽度：

$(window).on('load', function() {
  $('.slider').slick({
    infinite: true,
    speed: 800,
    slidesToShow: 1,
    variableWidth: false
  });

  $('.left').click(function () {
    $('.slider').slick('slickPrev');
  });

  $('.right').click(function () {
    $('.slider').slick('slickNext');
  });
});

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