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

如何解决光滑的滑块动态内容不会调整高度

我有一个带有自适应高度的光滑滑块。

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

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

当我调整窗口大小时，滑块会调整到正确的高度。

我尝试触发窗口调整大小事件但没有成功。

有没有人解决这个问题？

代码示例：Codepen - Slick dynamic height changes

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

一旦您切换动态内容，表单的其余部分将被切断。

解决方法

滑块在 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})