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.28k stars 289 forks source link

Carousel works perfectly, but not inside a modal #404

Open Novizh opened 1 year ago

Novizh commented 1 year ago

Hello @YIZHUANG, I've been using this carousel for my entire project and it works fine. However, there's a new feature that requires me to display the carousel inside a modal.

Prerequisites react-multi-carousel with Custom Dots Bootstrap

Describe the bug Let's say it's a product details page, which already has react-multi-carousel working perfectly fine, the a modal will open if an image is being clicked, which will render the exact same carousel only with bigger images inside the carousel.

To Reproduce Steps to reproduce the behavior:

  1. Copy and paste a perfectly working react-multi-carousel code, into a modal component, and render it in the same page.
  2. Add functionality to open said modal
  3. Wait for the modal to open

Expected behavior The modal is opened and the exact same carousel is rendered both inside the modal and behind the backdrop

Screenshots Instead I got this empty carousel Screenshot from 2023-08-24 14-04-42 Here's what's inside the element Screenshot from 2023-08-24 14 11 12

Please advise, been working this issue for hours

Reproduction You can try this case on this sandbox https://codesandbox.io/p/sandbox/twilight-lake-skdwtn

VigilioYonatan commented 10 months ago

any solution?

XiaoliangWong commented 1 month ago

Hope this help https://github.com/YIZHUANG/react-multi-carousel/issues/266