Carousel works perfectly, but not inside a modal

[Novizh]

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 Here's what's inside the element

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]

any solution?

[XiaoliangWong]

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