html - 光滑的滑块轮播 - 如何在加载活动图像后刷新或设置当前幻灯片高度

Question

我正在使用lazyLoad:ondemand& 因为图像有不同的高度我必须使用adaptiveHeight:true。但是使用adaptiveHeight+lazyLoad修剪图像，因为 Carousel 不知道每个图像的高度，因此无法明确设置幻灯片的高度。

换句话说，轮播没有图像的高度值（我没有将它们作为图像属性传递，因为我没有它们）所以滑块高度不会扩展。

这是设置：

$('.slider').slick({
  autoplay: true,
  lazyLoad: 'ondemand',
  infinite: true,
  dots:true,
  autoplaySpeed: 3000,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});

选项 1是在图像加载后尝试调整活动滑块的大小。但是怎么做？

选项2是尝试设置活动滑块的高度，之后图像已经被延迟加载，但是如何？

$('.slider').on('lazyLoaded', function (e, slick, image, imageSource) {
    //how to get the height of the current image after it has been loaded? Unfortunately image.height() shows 0.
    $('.slick-current',$('.slider')).height(image.height());
});

这是我的选项 2 尝试，但它不起作用（请在测试时清除图像缓存）：https ://jsfiddle.net/Lw8kodph

标签： htmljquerycsscarouselslick.js