在Bootstrap Carousel中相互褪色滑动

Question

我已经设法将一个工作的Bootstrap 4旋转木马装入我的页面，虽然我不知道如何（或者是否）可能使当前幻灯片淡出，下一张幻灯片已经可见，以便消除当前在幻灯片之间显示的空白阶段。

我不完全理解当前使用的CSS的工作方式 - 我原本认为需要的是将当前幻灯片转换为0，或者将下一张幻灯片转换为1，但我无法设想这样做的简单方法。

我设法在这里获得了一个带有这个旋转木马的页面：

http://www.minelands.com/portfolio/carousel.html

这是我正在使用的HTML：

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img class="img-responsive" src="images/portfolio/1140x600-01.png" alt=""></div>
<div class="item"><img class="img-responsive" src="images/portfolio/1140x600-02.png" alt=""></div>
<div class="item"><img class="img-responsive" src="images/portfolio/1140x600-03.png" alt=""></div>
</div>
<!-- Carousel nav -->
</div>

这是造型：

.carousel-fade .carousel-inner .item {
transition-property: opacity;
}

.carousel-fade .carousel-inner .item, .active.left, .active.right {
opacity: 1;
}

.carousel-fade .carousel-inner .active, .next.left, .prev.right {
opacity: 0;
}

.carousel-fade .carousel-inner .next, .prev, .active.left, .active.right {
left: 0;
transform: translate3d(0, 0, 0);
}

如果证明不完整，我可以提供所需的任何其他信息。