实现BootstrapCarouselFadeTransition淡入淡出效果

    

        

        

        

    
    
    

        

        

        

    
    
    ‹
    ›

.carousel-fade {
    .carousel-inner {
        .item {
            transition-property: opacity;
        }
        
        .item,
        .active.left,
        .active.right {
            opacity: 0;
        }

        .active,
        .next.left,
        .prev.right {
            opacity: 1;
        }
        .next,
        .prev,
        .active.left,
        .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
        }
    }
    .carousel-control {
        z-index: 2;
    }
}
html, 
body, 
.carousel, 
.carousel-inner, 
.carousel-inner .item {
    height: 100%;
}
.item:nth-child(1) {
    background: #74C390;
}
.item:nth-child(2) {
    background: #51BCE8;
}
.item:nth-child(3) {
    background: #E46653;
}

$('.carousel').carousel();