Bootstrap Carousel Fade

carousel-fade.less

.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      .transition(opacity 1s ease-out);
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}