SlickJS垂直对齐的幻灯片在加载时可与箭头交互以固定布局

如何解决SlickJS垂直对齐的幻灯片在加载时可与箭头交互以固定布局

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

这是演示codepen

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

解决方法

我通过在显示“联系人”选项卡时触发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。