Question

在一些情况下似乎有不正确的宽度计算，一个是如果你的光滑元素在窗口上创建一个垂直滚动条，其宽度计算偏离了17px（窗口滚动条的宽度）。

我发现了这个github问题，这与我遇到的问题完全相同：

https://github.com/kenwheeler/slick/issues/2717

我尝试触发调整大小事件来纠正它，但它似乎不起作用。我注意到当“afterChange”事件被触发时，光滑容器正确调整大小，但我不知道如何在初始加载时执行此操作。

$(element).slick({
    //slick settings
}).on('afterChange',function(event){
   //When this fires the container will resize correctly.
   //However, it fires once on initial load without resizing correctly.
}).trigger('afterChange');

我认为可能触发调整大小会起作用：

$(element).on('reInit', function(event, slick) {
    $(window).trigger('resize');
});

但它似乎没有帮助。

点击上一个/下一个导航控制柄后，每次都正确调整大小。我需要在初始加载时调用什么才能使容器正确调整大小，或者更好的是，有没有办法用任何CSS修复它？

编辑：

更多信息，如果我在光滑加载之前创建浏览器滚动条，它每次都会完全正确加载。似乎是一个奇怪的边缘情况，如果光滑是创建浏览器滚动条的元素，其宽度计算将偏离17px。

如果在初始化光滑后创建了浏览器滚动条，那么光滑会出现问题。

Answer 1

我找到了解决此问题的更好方法。每当您的滑块有一些宽度不准确时，请致电：

$("element")[0].slick.setPosition();

//If that doesn't work try
$("element").slick("refresh");

你的滑块应该自行纠正。如果这不起作用，您可以尝试触发调整大小，但我非常确定光滑的句柄通过调用上面的setPosition来调整大小。

Answer 2

我还使用了带有超时的光滑刷新选项，并正确调整了我的图像大小。

window.addEventListener("load", () => {
   setTimeout(function(){$('.element').slick("refresh");}, 1000);
});

光滑的初始宽度计算不正确

2 个答案: