In Ng bootstrap carousel component how can I have transition like fade-in/out between Images/Slides ?
In Ng bootstrap carousel component how can I have transition like fade-in/out between Images/Slides ?
I found a way to include a fade in/out like animation.
You have to define the .carousel-item and .carousel-item.active css class as follows:
.carousel-item {
display: block !important;
z-index: 1;
position: absolute;
opacity: 0;
transition: opacity 1.5s ease-in-out, visibility 1s;
visibility: hidden;
}
.carousel-item.active {
position: relative;
opacity: 1;
transition: opacity 1.5s ease-in-out, visibility 1s;
visibility: visible;
}
Based on @Jesus answer I came up with a version working for me:
.carousel-item {
display: block !important;
position: absolute;
opacity: 0;
transition: opacity 0.25s ease-in-out;
transition-delay: 0.25s;
}
.carousel-item.carousel-item-left,
.carousel-item.carousel-item-right {
position: relative;
opacity: 1;
}
.carousel-item.active {
z-index: 1;
opacity: 1;
transition-delay: 0s;
}
.carousel-item.active.carousel-item-left,
.carousel-item.active.carousel-item-right {
opacity: 0;
transform: unset;
}
This ensures that coming-in slide fade-in animation starts right after fade-out coming-out slide. Also it fixes a problem with immediate disappearance of coming-out slide by transform: unset.