ngb-carousel how can I have animation like fade-in/out between Images/Slides?

Question

In Ng bootstrap carousel component how can I have transition like fade-in/out between Images/Slides ?

Answer 1

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;
    
}