Carousel failed to load items sometimes (containerWidth, itemWidth issue)

[codex49]

Sometimes the Carousel failed to load items When I check the state in react dev I got 0 in containerWidth and itemWidth, when I change the value of containerWidth to 100 The items loaded, the Carousel works well the the value of containerWidth changes to 1140 and itemWidth to 228

HTML code when the problem is happen <div class="react-multi-carousel-list carouselContainer"><ul class="react-multi-carousel-track " style="transition: none 0s ease 0s; overflow: unset; transform: translate3d(0px, 0px, 0px);"></ul></div>

[ankit-kumar-jat]

i am having same issue if you resolved this issue please comment here

[abhinavdalal]

@ankit-kumar-jat can you confirm that css file is imported via:

import 'react-multi-carousel/lib/styles.css';

[zmeyer44]

Same issue here

[abhinavdalal]

can someone please share a codesandbox or a js fiddle replicating the issue

[ankit-kumar-jat]

Please check css that you applied and also check css for parent component in which you are using carousel

[alicerocheman]

same issue, if I log my slider's children, it logs children properly, but in the inspector the UL is empty. fragments seem to be wrongly interpreted as well, might be related.

[denFete]

Had the same issue, solved by adding: .react-multi-carousel-list { width: 100%; }

[TarikDervisevic]

I had the same issue and I fixed it by giving the parent div a min-width.

[YIZHUANG]

The parent needs to have a width of 100%