Slick initial width calculation incorrect

问题

There seems to be incorrect width calculations in a few situations, one being if your slick element creates a vertical scrollbar on the window, its width calculation is off by 17px (the width of the window scrollbar).

I found this github issue, which is exactly the same issue I'm experiencing:

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

I have tried firing resize events to correct it, but it doesn't appear to work. I've noticed that when "afterChange" event is fired, the slick container resizes correctly, but I don't know how to do this on initial load.

$(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');

I thought maybe triggering resize would work:

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

but it doesn't appear to help.

After clicking on the prev/next navigation handles, it resizes correctly everytime. What do I need to call on initial load to make the container resize correctly, or better yet, is there a way to fix this with any css?

edit:

Some more informaiton, if I create a browser scrollbar before slick loads, it loads completely correctly everytime. Appears to be a weird edge case where if slick is the element creating the browser scrollbar its width calculation will be off by 17px.

It appears that if a browser scrollbar is created after slick has initialized, slick will have problems.

回答1:

I found a better fix for this problem. Whenever your slider has some width inaccuracy, call:

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

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

And your slider should correct itself. If that does not work you can try to trigger a resize, but I'm pretty sure slick handles resizes by calling setPosition like above.

回答2:

I also used the slick refresh option with a timeout and that resized my images correctly.

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

来源：https://stackoverflow.com/questions/43216603/slick-initial-width-calculation-incorrect

标签

slick.js