I found this in the Slick.js code:
in the setDimensions function, or line 1333 of Slick v 1.3.14
trackWidth += Math.ceil($(this).outerWidth(true));
Use of outerWidth will be inaccurate if one of the parents of $(this) is hidden;
According to Jquery docs (http://api.jquery.com/outerwidth/)
Some of our carousels are indeed hidden, and I'm wondering if this is a common enough use case to write another function to check if any parents are hidden, and if hidden unhide them so that the calculation of the width is accurate. Please advise
I typically call setPosition on the carousel when the parent is shown, like:
$('.carousel')[0].slick.setPosition()
But if thats not possible, I could put this in as a feature request. Any width calculation isn't going to work when the element isn't visible, so a recursive parents check could help that.
What I did to circumvent this problem was quite simple once I found out that every slide's width were re-calculated if the _.slick-list_ container's width changes:
$(".your-container").slick(your_options);
var adjusted_width = Math.ceil($(".your-container").outerWidth());
$(".your-container").find(".slick-list").css({
width: adjusted_width
})
Thanks, I think I got a fix in without having to patch Slick, tho I do have a patch for that too
Most helpful comment
What I did to circumvent this problem was quite simple once I found out that every slide's width were re-calculated if the _.slick-list_ container's width changes: