具有淡入淡出效果的Bootstrap 4轮播，没有嵌入式响应类

Question

我正在尝试做一个具有淡入淡出效果的旋转木马。我在stackoverflow上找到了一种方法，但它添加了类embed-responsive embed-responsive-16by9 embed-responsive-item。在他们看来，移动视图看起来很糟糕。如果我删除它们旋转木马断裂，我看到白色背景，如果我向下滚动，我可以看到我的图像。也许有更好的方法来做淡化效果？

$dark-overlay: rgba(0, 0, 0, 0.7);

body {
  overflow-x: hidden;
}

.carousel.carousel-fade .carousel-item {
  display: block;
  opacity: 0;
  transition: opacity ease-out .7s;
}

.carousel.carousel-fade .carousel-item.active {
  opacity: 1 !important;
}

.carousel-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: $dark-overlay;
}

.carousel-caption {
  transform: translateY(-50%);
  bottom: initial;
  top:50%;
}

.carousel-image-1 {
  background: url('../images/miami1.jpeg');
  background-size: cover;
}

.carousel-image-2 {
  background: url('../images/miami2.jpeg');
  background-size: cover;
}

.carousel-image-3 {
  background: url('../images/miami3.jpeg');
  background-size: cover;
}

   <div id="myCarousel" class="carousel carousel-fade" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0"></li>
            <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner embed-responsive embed-responsive-16by9">
            <div class="carousel-item carousel-image-1 embed-responsive-item">
                <div class="carousel-caption text-right">
                    <h1 class="display-3">Sveiki</h1>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor enim ex
                        exercitationem laboriosam nihil numquam tempora, vitae voluptates. Dolores, maxime!</p>
                </div>
            </div>
            <div class="carousel-item carousel-image-2 embed-responsive-item active">
                <div class="carousel-caption">
                    <h1 class="display-3">Miami</h1>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor enim ex
                        exercitationem laboriosam nihil.</p>
                    <a href="#" class="btn btn-primary btn-lg">Sužinok daugiau</a>
                </div>
            </div>
            <div class="carousel-item carousel-image-3 embed-responsive-item">
                <div class="carousel-caption text-right">
                    <h1 class="display-3">Sveiki</h1>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor enim ex
                        exercitationem laboriosam nihil numquam tempora, vitae voluptates. Dolores, maxime!</p>
                </div>
            </div>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control-next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>