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

Viewed 4856

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

2 Answers

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.

Related