Created by: MartijnCuppens
When the carousel is transitioning, the background is shown through the images. This PR prevents this from happening by disabling the transition of the carousel item that is fading out and raising the z-index
of the carousel item that is fading in. I also needed to raise the z-index
of the carousel controls, the indicators had a z-index
which was high enough.
I had to add the transition-delay
to the getTransitionDurationFromElement
function to prevent the classes to be removed too soon. Not sure if we should rename this function to make this clear or not.
Issue: https://getbootstrap.com/docs/4.1/components/carousel/#crossfade
Demo new carousel: https://deploy-preview-27529--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/#crossfade