Clunky Bootstrap旋轉木馬

Question

我使用bootstrap製作了一個旋轉木馬，但當圖像發生變化時，它們都變得笨重，並且背景在變化時顯示爲白色，這實際上並不令人滿意。 這是拳頭時間我用引導旋轉木馬，所以也許我做錯了什麼......這是我的HTML：

<div class="container-fluid"> 
<div class="row mainSlider"> 
    <div class="carousel slide" id="main_slider" data-ride="carousel"> 
     <ol class="carousel-indicators"> 
      <li data-target="#main_slider" data-slide-to="0" class="active"></li> 
      <li data-target="#main_slider" data-slide-to="1" class="active"></li> 
      <li data-target="#main_slider" data-slide-to="2" class="active"></li> 
     </ol> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="img/slide.jpg"> 
       <div class="container"> 
        <div class="col-md-6"> 
         <h3>Title of the Slide</h3> 
         <p>Content of the Slide</p> 
         <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a> 
        </div> 
       </div> 
      </div> 
      <div class="item active"> 
       <img src="img/slide.jpg"> 
       <div class="container"> 
        <div class="col-md-6"> 
         <h3>Title of the Slide 2</h3> 
         <p>Content of the Slide 3</p> 
         <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a> 
        </div> 
       </div> 
      </div> 
      <div class="item active"> 
       <img src="img/slide.jpg"> 
       <div class="container"> 
        <div class="col-md-6"> 
         <h3>Title of the Slide 3</h3> 
         <p>Content of the Slide 3</p> 
         <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

而且我做了一些自定義的CSS，使它適合我的設計：

.mainSlider { 
    height:443px; 
} 
#main_slider { 
    height:100%; 
} 
.mainSlider #main_slider .carousel-inner{ 
    height:100%; 
    list-style-type:none; 
    padding:0; 
    margin:0; 
} 
.mainSlider #main_slider .carousel-inner .item { 
    height:100%; 
    padding:0; 
    margin:0; 
    box-sizing:border-box; 
    padding-bottom:40px; 
    color:#fff; 
    position:relative; 
} 
.mainSlider #main_slider .carousel-inner .item img { 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
} 
.mainSlider #main_slider .carousel-inner .item h3 { 
    margin:90px 0 30px 0; 
    font-size:45px; 
    font-family:Merriweather; 
} 
.mainSlider #main_slider .carousel-inner .item p { 
    font-size:17px; 
} 
.mainSlider #main_slider .carousel-inner .item a.viewMore { 
    margin:20px 0; 
    padding:10px 25px; 
    background-color:#eb7022; 
    display:inline-block; 
    border-radius:4px; 
} 

這是a gif它現在的樣子。 很抱歉，如果這真的很愚蠢，我對前端開發很陌生。 謝謝！

編輯這裏的的情況下，一個截屏，你看不到GIF：http://screencast.com/t/hWtUZcpRD

Answer 1

您有需要改變兩兩件事：

1）.mainSlider #main_slider .carousel-inner .item刪除position:relative;，這將停止幻燈片之間的延遲，因此沒有任何空白區域。

2）您應該只將.active類應用到您的第一張幻燈片。不是所有的人。

另外：

這可能並不適用，因爲你可能有額外的CSS等一切準備好處理，但我改變了你內在的文本和按鈕都適用，使他們留在幻燈片時視口的變化裏面。它只是恢復到內置的carousel-caption類，並根據需要調整內容。

見工作示例

.mainSlider #main_slider .carousel-inner .item { 
 
    color: #fff; 
 
} 
 
.mainSlider #main_slider .carousel-inner .item h3 { 
 
    font-size: 45px; 
 
    font-family: Merriweather; 
 
} 
 
.mainSlider #main_slider .carousel-inner .item p { 
 
    font-size: 17px; 
 
} 
 
.mainSlider #main_slider .carousel-inner .item a.viewMore { 
 
    margin: 20px 0; 
 
    padding: 10px 25px; 
 
    background-color: #eb7022; 
 
    display: inline-block; 
 
    border-radius: 4px; 
 
} 
 
.mainSlider #main_slider .carousel-inner .item .carousel-caption { 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container-fluid"> 
 
    <div class="row mainSlider"> 
 
    <div class="carousel slide" id="main_slider" data-ride="carousel" data-interval="5000"> 
 
     <ol class="carousel-indicators"> 
 
     <li data-target="#main_slider" data-slide-to="0" class="active"></li> 
 
     <li data-target="#main_slider" data-slide-to="1" class="active"></li> 
 
     <li data-target="#main_slider" data-slide-to="2" class="active"></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
      <img src="http://placehold.it/2350x1000/000"> 
 
      <div class="carousel-caption"> 
 
      <h3>Title of the Slide</h3> 
 

 
      <p>Content of the Slide</p> <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a> 
 

 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://placehold.it/2350x1000/f00"> 
 
      <div class="carousel-caption"> 
 
      <h3>Title of the Slide</h3> 
 

 
      <p>Content of the Slide</p> <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a> 
 

 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="http://placehold.it/2350x1000/ff0"> 
 
      <div class="carousel-caption"> 
 
      <h3>Title of the Slide</h3> 
 

 
      <p>Content of the Slide</p> <a href="/services" class="viewMore">View More <i class="fa fa-angle-double-right"></i></a> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>