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