光滑的滑块动态内容不会调整高度

Question

我有一个带有 adaptiveHeight 的光滑滑块。

滑块包含一个多步表单，一些字段是有条件的，可能会弹出错误消息。

当我显示错误消息或条件字段时，幻灯片的高度不适应，导致某些字段被裁掉。

当我调整 window 大小时，滑块会调整到合适的高度。

我试过触发 window 调整大小事件，但没有成功。

有人解决这个问题吗？

代码示例：Codepen - Slick dynamic height changes

$('#dynamic').on('change', function() {
  $('.dynamic').toggleClass('visible');
});

切换动态内容后，表格的其余部分将被截断。

Answer 1

滑块在 div.slick-list.draggable 上设置固定高度。您需要为 div.slick-list.draggable 提供与第一张幻灯片相同的高度 - div[data-slick-index="0"].

  var height = $('div[data-slick-index="0"]').outerHeight(true);
  $(".slick-list.draggable").height(height)

在$('#dynamic').on('change' () =>{})

中使用上面的代码

$('#dynamic').on('change', function() {
  $('.dynamic').toggleClass('visible');
  var height = $('div[data-slick-index="0"]').outerHeight(true);
  $(".slick-list.draggable").height(height)
});

如果您想获得与 Slider 类似的动画，请使用此代码。

  $(".slick-list.draggable").animate({height: height})

光滑的滑块动态内容不会调整高度

Slick slider dynamic content won't resize height

javascript

css

carousel

slick.js