Bootstrap 4 行未根据 Slick.js 幻灯片高度调整其高度

Question

我正在尝试制作一个 Slick.js 滑块父项和拇指导航器。如 codepen 演示所示，每张幻灯片都有不同的高度，根据容器内的内容而变化。我的期望是，带有 bg-dark 的行应该调整它的高度，因为 Slick 正在根据内容改变它的高度，但这并没有发生。

    $(".profile-slider").slick({
      slidesToShow: 1,
      slidesToScroll: 1, 
      arrows: false,
      centerMode:true,
      dots: false,
      fade: true,
    });
      
    $(".thumbnail-slider").slick({
      asNavFor: ".profile-slider", 
      dots: true,
      infinite: true, 
      slidesToShow: 10, 
      slidesToScroll: 1,
      centerMode: true,
      variableWidth: true, 
      arrows: false,
      focusOnSelect: true
    });

Answer 1

您应该可以使用设置 adaptiveHeight: true 来解决这个问题。此外，如果您一次只显示一张幻灯片，则无需设置 centerMode。

$(".profile-slider").slick({
  slidesToShow: 1,
  slidesToScroll: 1, 
  arrows: false,
  dots: false,
  fade: true,
  adaptiveHeight: true
});

Bootstrap 4 行未根据 Slick.js 幻灯片高度调整其高度

Bootstrap 4 row is not adjusting its height accroding to Slick.js slide height

slick.js

bootstrap-4