Slick Slider开启adaptiveHeight后图片被裁剪，保留lazyLoad如何解决？

问题原因 #

这不是Slick轮播的Bug，是懒加载与自适应高度的执行顺序导致的：

• adaptiveHeight 配置会在轮播初始化阶段就计算每个幻灯片的容器高度
• 你开启的lazyLoad: 'ondemand'是按需加载模式，未激活状态的幻灯片内的图片还未加载，DOM节点没有实际的图片高度值，导致Slick初始计算的高度偏小，就出现了图片裁剪的情况
• 调整窗口大小时Slick会自动触发位置重计算逻辑，此时对应幻灯片的图片已经加载完成，能拿到正确高度，所以显示正常

解决方案（保留lazyLoad功能） #

监听Slick的懒加载完成事件，手动触发高度重计算即可，修改后的初始化代码如下：

$('.slider').slick({
  autoplay: true,
  lazyLoad: 'ondemand',
  infinite: true,
  dots: true,
  autoplaySpeed: 3000,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
}).on('lazyLoaded', function (event, slick, image, imageSource) {
  // 单张图片懒加载完成后，重新计算轮播高度与位置
  $('.slider').slick('setPosition');
});

如果你的所有轮播图片比例固定，也可以提前给图片外层容器设置对应比例的占位高度，不需要修改JS逻辑就能避免初始化高度计算错误。

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