Previously, the slide animation when going to the next carousel item was appearing to not trigger. The root cause is that each subsequent item in the carousel has a higher stacking context, so when the next item is moved from display: none to display: block, it immediately replaces previous items visually while the slide animation happens in the background and out of view.
This PR
Explicitly set the stacking context using z-index to ensure that buttons are always clickable and the .active carousel item is always on top so that the slide animation is visible until the transition completes.
Fixes #235
Previously, the slide animation when going to the next carousel item was appearing to not trigger. The root cause is that each subsequent item in the carousel has a higher stacking context, so when the next item is moved from
display: nonetodisplay: block, it immediately replaces previous items visually while the slide animation happens in the background and out of view.This PR
z-indexto ensure that buttons are always clickable and the.activecarousel item is always on top so that the slide animation is visible until the transition completes.Testing
See before video in #235.
After the changes:
https://github.com/CityOfDetroit/COD-Design-System/assets/143553259/3ff21807-7b79-4383-852f-23da6f010958