Slick JS 在加载时垂直对齐幻灯片，但在与箭头交互时修复布局

Question

我创建了一个演示来展示我的问题。当您转到联系人部分时，您会看到所有 slickJS 幻灯片垂直堆叠，但只要您单击箭头或滑动内容或与任何幻灯片交互，它就会自行修复。问题仅在加载时出现。

这是演示codepen

$(".demo-slider").slick({  
  slidesToShow: 4,
  slideToScroll:1, 
  infinite: true,
  arrow:true
});

Answer 1

我通过在显示联系人选项卡时触发 slick.js' 刷新事件解决了这个问题，如下所示：

$(".demo-slider").slick({  
  slidesToShow: 4,
  slideToScroll:1, 
  infinite: true,
  arrow:true
});

$('#nav-contact-tab').on('shown.bs.tab', function (e) {
  $('.demo-slider').slick('refresh');
});

You can see my fork in codepen.

Slick JS 在加载时垂直对齐幻灯片，但在与箭头交互时修复布局

SlickJS vertically aligned slides on load but on interaction with arrows fix the layout

html

javascript

css

slick.js

bootstrap-4