问题描述
我创建了一个演示来展示我的问题。当您进入联系部分时,您将垂直看到所有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');
});