Carousel slides initialized in a non-visible state remain inert even when the carousel becomes visible

[patrick-mcdougle]

Describe the bug

When a carousel is initialized it uses it's current visibility to determine if the slides should be marked as inert. If the carousel becomes visible (like through a drawer or something), the sides are in an incorrect state. When the inert attribute is on the slide, clickable elements within the slide are not clickable until the carousel has been interacted with.

To Reproduce

Steps to reproduce the behavior:

1. Go to rothys.com, choose a product and add it to your cart
2. Refresh the page (this is important, do not skip this step)
3. Open the cart by clicking on the icon in the header
4. Attempt to add the add-on item in the bottom of the cart to your cart

This reproduction will not be possible after Monday Feb. 10 because I will be applying a bandaid by manually calling initializeSlides on the carousel instance when the drawer is opened. I will attempt to create a reproduction in a more stable place while we ideate solutions in this library.

Update: A reproduction case can be found on codepen.

Browser / OS

• OS: Mac
• Browser: Chrome (I think any browser supporting the inert attribute)
• Browser version: 132

Additional information

Provide any additional information about the bug here.