Jumbotron圖像滑塊

hui guys，我有我的jumbotron和完整的背景圖像放置在它。我在想自己是否有可能讓它不僅僅是一張靜態圖像，而是讓一些幻燈片包含例如5張可以每5毫秒滑動一次的圖片？可能嗎？它怎麼能實現我提到的？我下面當前實現：Jumbotron圖像滑塊

HTML：

<div class="jumbotron"> 
      <div class="container"> 
      </div> 
      </div>

和CSS它：

.jumbotron { 
    position: relative; 
    background: #000 url('35.jpg') center center no-repeat; 
    width: 100%; 
    background-size: cover; 
    overflow: hidden; 
    height: 370px; 
}

問題與第二galery滑塊實現最上面的一個後：

<!-- Gallery --> 
    <div class="container"> 
     <section> 
      <div class="page-header" id="gallery"> 
       <h2>Kilka wykonanych projektów.<small> Couple of already realased projects.</small></h2> 
      </div> 

      <div class="carousel slide" id="screenshot-carousel" data-ride="carousel"> 
       <ol class="carousel-indicators"> 
        <li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li> 
        <li data-target="#screenshot-carousel" data-slide-to="1"></li> 
        <li data-target="#screenshot-carousel" data-slide-to="2"></li> 
        <li data-target="#screenshot-carousel" data-slide-to="3"></li> 
       </ol> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <img src="highway.jpg" alt="Text of the image"> 
         <div class="carousel-caption"> 
          <h3>Highway heading</h3> 
          <p>This is the caption</p> 
         </div> 
        </div> 
        <div class="item"> 
         <img src="river.jpg" alt="Text of the image"> 
         <div class="carousel-caption"> 
          <h3>River heading</h3> 
          <p>This is the caption</p> 
         </div> 
        </div> 
        <div class="item"> 
         <img src="street.jpg" alt="Text of the image"> 
         <div class="carousel-caption"> 
          <h3>Street heading</h3> 
          <p>This is the caption</p> 
         </div> 
        </div> 
        <div class="item"> 
         <img src="painting.jpg" alt="Text of the image"> 
         <div class="carousel-caption"> 
          <h3>Painting heading</h3> 
          <p>This is the caption</p> 
         </div> 
        </div> 

       </div><!-- End Carousel inner --> 
       <a href="#screenshot-carousel" class="left carousel-control" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left"></span> 
       </a> 
       <a href="#screenshot-carousel" class="right carousel-control" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
       </a> 
      </div><!-- End Carousel --> 

     </section> 
    </div>

這是圖像變化後的外觀如何：

enter image description here