Slick track width calculating width to large number

[phc5]

Has anyone run into this issue and know how to resolve it? I am seeing slick-track's width being calculated incorrectly to a very large number on mobile devices (ios chrome and safari, haven't tested android). The width is correct on desktop chrome, firefox, edge, ie11...

[shererere]

In my case, adding following rule to the container of slick slider fixed the problem. width: 100%

[GenoD]

I had the same issue, found that an ancestor was set to flex and was throwing off the calculation somehow

[neomaxzero]

I also have this issue from Chrome 80. Tried multiple options like the ones suggested here: https://github.com/akiran/react-slick/issues/230

But still no luck.

[camilocagd]

@neomaxzero we used the following attributes in the container:

max-width: 100vw; width: 100%;

Good luck!!!

[rajpraful]

I also have the same issue and giving width:100% also not working.

I can't use 100vw as I have side navbar and it's dynamic in different screens.

[HZooly]

overflow: hidden worked for me

[conary-h]

@HZooly thank you! This worked for me:

.slider-container {
    max-width: 100vw;
    width: 100%;
    overflow: hidden;
}

[Gennady-G]

@HZooly thank you! This worked for me:

.slider-container {
    max-width: 100vw;
    width: 100%;
    overflow: hidden;
}

And what can we do if we don't know vw and width is different in different cases.. My banner could be 80vw or 100vw depending of situation...

Anybody resolved?..

update: the only 50/50 working solution I found here: https://stackoverflow.com/questions/45962822/slick-slider-not-working-in-a-flex-container

.container-wrap {
    position:absolute;
    top:150px;
    bottom:0px;
    width:85%;
    height:100%;
}

But is not solution for me..

[zamlahani]

@HZooly thank you! This worked for me:

.slider-container {
    max-width: 100vw;
    width: 100%;
    overflow: hidden;
}

worked for me

[DhruvinPatel78]

@HZooly thank you! This worked for me:

.slider-container {
    max-width: 100vw;
    width: 100%;
    overflow: hidden;
}

You put to the

above or to itself?

[ramach05]

we used the following attributes in the container

where can i find this "container"?

[Bharti-kumath]

.slick-slider{ max-width: 100vw; width: 100%; overflow: hidden !important; }

[shahrukh263]

i am using .slick-slider{ max-width: 100vw; width: 100%; overflow: hidden !important; } but not working in mobile mode

[varunpandey21]

@shahrukh263 Same with me. Working fine in desktop and tablet but not in mobile

[AaronSeaweed]

我有同样的问题，发现一个祖先被设置为 flex 并且以某种方式放弃了计算

Very helpful to solve my problem, thank you

[ilchoTaleski]

I also found an ancestor which had a display: flex property. Its child had flex: 1, but I needed to add minWidth: {0} to fix it.

[atulkkale]

When I applied flex-basis to the parent element, it caused the parent width to become too large. Therefore, I use width instead of flex-basis.

[HiralBrightness]

.slick-slider{ max-width: 100vw; width: 100%; overflow: hidden !important; }

Very helpful to solve my problem, thank you so much.

[0franco]

in my case was width: auto on some parent wrapper

[IvaanTorres]

In my case it wasn't a flex container, but a grid one. It was using grid-template-rows without a grid-template-columns actually. I just had to add the property: grid-template-columns: 100%

[dhruv-marutitech]

@HZooly thank you! This worked for me:

.slider-container {
    max-width: 100vw;
    width: 100%;
    overflow: hidden;
}

Thanks a ton for the solutions. After trying so many things, this worked for me..

[HiralBrightness]

Thank you for your solution

On Fri, 2 Jun 2023 at 18:42, Dhruvkumar Saliya @.***> wrote:

@HZooly https://github.com/HZooly thank you! This worked for me:

.slider-container { max-width: 100vw; width: 100%; overflow: hidden; }

Thanks a ton for the solutions. After trying so many things, this worked for me..

— Reply to this email directly, view it on GitHub https://github.com/akiran/react-slick/issues/1571#issuecomment-1573714056, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2ODVUVKKN6YSGETXQCIWBLXJHRDXANCNFSM4HXUOETA . You are receiving this because you commented.Message ID: @.***>

[niyasmn]

hi please wrap it with container if its full width use container fluid and add utility classes for margin left right 0 and padding left right 0. then your slick slider calculation will be fine

[vardan-arm]

FWIW, I had the issue and the reason was that I missed this part of instructions:

Also install slick-carousel for css and font npm install slick-carousel // Import css files import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";

After doing them the issue was gone.

[AlexanderGalt]

I also found an ancestor which had a display: flex property. Its child had flex: 1, but I needed to add minWidth: {0} to fix it.

It really worked, THANKS a lot!