Slider width being set to a larger number?

[medv]

I implemented a slider sometime in the past but now it's broken. It's like the calculation of the slick container takes max-width of the parent element as the width, so it fails to size itself down when its container is sized down.

My parent element is 98% wide and max-width 1600px, and slick does not go below 1600px anymore. It used to scale fine before. I have scoured for any side effects in my css but I fail to find any, this happens no matter what I set as my slides, too, even simple naked div with a string inside it.

[amitthakkar22288]

i think this is related to a recent chrome update if using flex layouts, try setting min-width:0;min-height:0

http://stackoverflow.com/questions/35168412/incorrect-flexbox-display-in-chrome-48

[medv]

Issue persists, I am not using flex, but it appears further up the ancestor tree. However i break out of flex before the slider depth. Anyhow, setting those to all elements up the tree does not solve the issue.

[akiran]

Please provide code snippet to replicate the issue

[akiran]

Closing this issue. Please reopen if you can reproduce the issue with demo https://jsfiddle.net/kirana/20bumb4g/

[nabilfreeman]

@akiran, I broke it:

https://jsfiddle.net/20bumb4g/128/

Note the purple overlapping colour.

I'm currently suffering from this issue - basically the slider works perfectly until you embed it in a Flex view. Quite difficult to work around in some situations.

[nabilfreeman]

I can't reopen the issue so could you?

[nabilfreeman]

I updated it here with a check for the pixel width of the .flex-inner div.

It comes back as 3080px when it should be 500px

https://jsfiddle.net/20bumb4g/129/ (open your console)

[amitthakkar22288]

i had this issue too. temp fix is adding

min-width:0;
max-height:0;

to .flex-inner class.

[nabilfreeman]

@amitthakkar22288, you're a legend man! This worked for me.

I didn't actually need max-height:0 for my horizontal slider, just min-width:0;

You can toggle the fix with a button here:

https://jsfiddle.net/20bumb4g/130/

[creeperyang]

I don't use flex and slider width is still larger. So any idea?

When resize, the slider will get the right width. So currently I trigger a resize event to fix this.

[JakobJingleheimer]

We're seeing this also (as @creeperyang described). We do use flexbox on the slides, but the min-width + max-height trick just collapses the slides. It appears that the amount by which the slide's width is incorrect is equal to the amount of padding applied to the grandchild of each slide (but that might be coincidence).

[Randy808]

I'm still encountering this problem of 'too wide' slides. The slick-slide elements all have styles directly on the div that impose large widths. I even tried setting a fixed width in the settings, but it still refuses to work. I also ave dynamically created slides, so that might be the problem although i don't know why.

EDIT: Nvm, I was passing in null as settings.

[TravnikovDev]

Guys, i've made vertical gallery like what https://jsfiddle.net/20bumb4g/2708/ In example works fine, but in my app (based on react-redux-universal-hot-example) its looks terrible. I used flexboxgrid and fixes from this thread dont helped me. What To Do?!

[TravnikovDev]

Set width,height in <img> helps me

[jonnyi]

The issue as described above still exists for me. Could you possibly reopen this?

[laveesingh]

@jonnyi could you generate a codesandbox demo for the same?

[chadsteele]

I had a similar, but different issue where .slick-slide's width was being mis-calculated when I only had one slide in the carousel... when I add settings = { ... variableWidth: true ... } solved it for me. Perhaps it will help some of you.

[prasanthd2246]

guys if u have problem with slick slider width even though without using any flex box or grid and the slide images are appearing if u scroll through large width then you could use overflow:hidden in container having slider .. it solved my issue ;