Bootstrap Carousel fade effect CSS3

style.less

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