search

YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.25k stars 286 forks source link

carousel messes up style of everything else in mobile. (item-width explodes) #259

Closed Mudl closed 3 years ago

Mudl commented 3 years ago

Everything works fine in desktop size, but as soon as I reduce the screen size to mobile, using chrome dev tools, everything breaks. The carousel just puts the images right next to each other so that the screen width explodes and therefore it messes up everything else as well.

the width just increases until it reaches this point. <li data-index="0" aria-hidden="false" class="react-multi-carousel-item react-multi-carousel-item--active pl-3 pr-3" style="flex: 1 1 auto; position: relative; width: 1.67771e+07px;">

used just one breakpoint in "responsive" since I want all of them look the same anyways. and a custom component as an item, but result is the same with just plain old img. carousel itself is within a flex block.

I have no idea if I'm doing something wrong, or if this is a bug. Please advise.

Toby222 commented 3 years ago

Did you find a solution to this? Facing the same issue

Axel-KIRK commented 2 years ago

Same here, I just add some image instead of the list and BOUM.

YusufTurhan17 commented 1 year ago

By giving maxwidth 100vw to the container, you can solve the problem.