Bootstrap 4 carousel slide transition

carousel-fade.css

/*
  Bootstrap Carousel Fade option
  Not my work. This is supposedly going to be added to core in 4.1 or 4.2
  https://github.com/twbs/bootstrap/pull/22958/files/30e718c66cbcf860a9e93445eeb797bf782e9d62
*/

.carousel-fade {
  .carousel-item {
    opacity: 0;
    transition-duration: 0.6s;
    transition-property: opacity;
  }

  .carousel-item.active,
  .carousel-item-next.carousel-item-left,
  .carousel-item-prev.carousel-item-right {
    opacity: 1;
  }

  .active.carousel-item-left,
  .active.carousel-item-right {
    opacity: 0;
  }

  .carousel-item-next,
  .carousel-item-prev,
  .carousel-item.active,
  .active.carousel-item-left,
  .active.carousel-item-prev {
    transform: translateX(0);

    @supports (transform-style: preserve-3d) {
      transform: translate3d(0, 0, 0);
    }
  }
}