Slick: Slick uses outerwidth in calculation of div width which can be inaccurate

Created on 18 Nov 2014  路  3Comments  路  Source: kenwheeler/slick

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

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:

$(".your-container").slick(your_options);

var adjusted_width = Math.ceil($(".your-container").outerWidth());

$(".your-container").find(".slick-list").css({
    width: adjusted_width
})

All 3 comments

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rahi-rajeev picture rahi-rajeev  路  3Comments

ericestes picture ericestes  路  3Comments

Luneya picture Luneya  路  3Comments

barzev picture barzev  路  3Comments

hoghamburg picture hoghamburg  路  3Comments