ジャンボトロンのスタイルでブーストラップ4のフェーディングカルーセル

Question

私はジャンボトロンで非常に好きなデザインを見つけましたが、私が読んだバックグラウンドでイメージをフェードアウトしたいのですが、カルーセル。

great example of code私は画像を中心にしていましたが、基本レイアウトにマッチした後、スタイルを完全に組み合わせることができませんでした。使用したいと思うブートストラップ4では動作しません。

作業をブートストラップ3：https://www.bootply.com/iW6Tn3ks6I

好みのスタイル（ナビゲーションバーを含む）：私はしましたhttps://www.bootply.com/LdBa0MzdpV

ここ

は（それを示すリンクが働いて）、関連するHTMLとCSSコードですすでに微調整の束を作ったが、私のCSSの知識は限られており、私はどこここから行くのか分かりません。たとえば、ジャンボトロンのテキストは、パディングのトンを持って、私はCSSの行は、それに関連した見つけることができないようです。

編集：作業の遷移を得たが、フェードは何もしないと、ウィンドウのサイズを変更するとき、私はテキストを垂直方向に中央揃えすることはできません（どちらかtopまたはbottomはcarousel-overlayに設定することができ、両方ではない） - https://www.bootply.com/Vq9kNFcfPA

編集2：回答をhereから変更して正常に機能しました。

Answer 1

あなたは自分のCSSに必要されるものを追加することができます。

<div class="header clearfix"> 
    <div class="row"> 
     <div class="col-sm-3"><h3 class="text-muted">Project name</h3> 
     </div> 
     <div class="col-sm-9 float-right"><nav> 
     <ul class="nav nav-pills pull-right"> 
     <li class="nav-item"> 
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Contact</a> 
     </li> 
     </ul> 
    </nav> 
     </div> 
    </div> 
    </div> 

body { 
    color: #5a5a5a; 
    padding-top: 1.5rem; 
    padding-bottom: 1.5rem; 
} 

/* Custom page header */ 
.header { 
    padding-bottom: 1rem; 
    border-bottom: .05rem solid #e5e5e5; 
} 
/* Make the masthead heading the same height as the navigation */ 
.header h3 { 
    margin-top: 0; 
    margin-bottom: 0; 
    line-height: 3rem; 
} 


/* Carousel Fade Effect */ 
.carousel.carousel-fade .item { 
    -webkit-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
    opacity: .5; 
} 
.carousel.carousel-fade .active.item { 
    opacity: 1; 
} 
.carousel.carousel-fade .active.left, 
.carousel.carousel-fade .active.right { 
    left: 0; 
    z-index: 2; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

.carousel-overlay { 
    position: absolute; 
    bottom: 100px; 
    right: 0; 
    left: 0; 
    color: white; 
    text-shadow: 1px 1px 1px rgba(0,0,0,.75); 
} 

.carousel-overlay h1 { 
    font-size: 3.5em; 
} 


.slide1, .slide2, .slide3 { 
    min-height: 560px; /* Must have a height or min-height set due to use of background images */ 
    background-size: cover; 
    background-position: center center; 
} 
.slide1 { 
    background-image: url(http://placekitten.com/1000/300); 
} 
.slide2 { 
    background-image: url(http://placekitten.com/1100/300); 
} 
.slide3 { 
    background-image: url(http://placekitten.com/1200/300); 
} 

/* Responsive: Portrait tablets and up */ 
@media screen and (min-width: 48em) { 
    /* Remove the padding we set earlier */ 
    .header, 
    .marketing, 
    .footer { 
    padding-right: 0; 
    padding-left: 0; 
    } 
    /* Space out the masthead */ 
    .header { 
    margin-bottom: 2rem; 
    } 
    /* Remove the bottom border on the jumbotron for visual effect */ 
    .jumbotron { 
    border-bottom: 0; 
    } 
}