Problems using the react-alice-carousel in a (bootstrap-5) modal

[GoodGuyMarco]

Dear maintainers of this project 👋

I really love this project and it's simple usage 🚀

I just replaced all bootstrap carousels with the alice carousel and it worked great out of the box. Unfortunately I have a use-case to show the carousel in a modal which seems to cause a problem.

Problem: The images do not show up when the modal is opened. However when the browser window is resized a tiny bit the images immediately show up 🤔

I am aware of the fact that bootstrap might cause side effects here not related to this project but I thought that you guys might have an idea of what is causing this issue. I made a reproduction repository and would be really thankfull if someone could check it out and have a look at this problem ❤️

Repository: https://github.com/GoodGuyMarco/react-alice-carousel-in-bootstrap-5-modal Setup: npm install && npm start Reproduction instructions: Just click the "Launch modal" button to open the modal. Images won't show up. Resize broswer window a tiny bit and images should show up.

[LeoTT]

AliceCarousel seems to initialize the items width based on the parent element, which does not work when the parent element has display: none (as is this case due to unopened modal).

You can fix your problem by force-updating your component after the modal opens. Tested it with calling this.forceUpdate() after clicking on modal-button. Waiting for bootstraps shown.bs.modal-event would be cleaner.

[GoodGuyMarco]

I managed to work around this issue by listening on the shown.bs.modal-event and initializing the carousel after that, see: https://getbootstrap.com/docs/5.0/components/modal/#events

But maybe this library could support this use-case as it is not unusual to use a carousel in a modal. This might be possible with the Intersetction Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API. If there is no need to support this kind of functionality, feel free to close this issue.

[maxmarinich]

Hi, @GoodGuyMarco! As @LeoTT noticed before, the carousel initializes the items based on the parent element width/height. In this case use renderKey property for intent the carousel updates:

import React, {useState } from 'react';

function App() {
      const [renderKey, setKey] = useState(0);
      // ...

      <button
          type="button"
          className="btn btn-primary"
          data-bs-toggle="modal"
          data-bs-target="#modal"
          onClick={() => setKey(Date.now())}
        >
          Launch modal
      </button>
      // ...

      <AliceCarousel
          renderKey={renderKey}
          items={[
            <img src={zeroSrc} alt="0" className="img-thumbnail" />,
            <img src={oneSrc} alt="1" className="img-thumbnail" />,
            <img src={twoSrc} alt="2" className="img-thumbnail" />,
            <img src={threeSrc} alt="3" className="img-thumbnail" />,
          ]}
      />

      //...
}