爲什麼我使用Bootstrap 3傳送帶獲取此行爲？

Question

我試圖用我自己的旋轉木馬實現this effect，在右側和左側都有半透明的圖像;但當我在幻燈片之間移動時，我正在使用我自己的項目獲得這個不好的效果：here。

下面是HTML代碼，我寫道：

<header class="container"> 
    <div class="row"> 
    <div id="carousel1" class="carousel slide" data-ride="carousel"> <!--Carousel begin--> 
    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
    <div class="carousel-caption carouselTextBackground"> 
     <h2>Hangars</h2> 
     </div> 
    <div class="slideRight hidden-xs"> 
     <img src="images/carousel-home/Bridge - 1200 by 420.jpg" class="img-responsive"> 
     </div> 
     <div class="slideLeft hidden-xs">  
     <img src="images/carousel-home/Frame - 1200 by 420.jpg" class="img-responsive"> 
     </div> 
    <img src="images/carousel-home/Hangar - 1200 by 420.jpg" alt="First slide image" class="center-block img-responsive"> 
     </div> <!-- end of item --> 
     <div class="item"> 
     <div class="carousel-caption carouselTextBackground"> 
     <h2>Bridges</h2> 
     </div> <!-- end carousel-caption --> 
     <div class="slideRight hidden-xs"> 
     <img src="images/carousel-home/Frame - 1200 by 420.jpg" class="img-responsive"> 
     </div> 
     <div class="slideLeft hidden-xs"> 
     <img src="images/carousel-home/Hangar - 1200 by 420.jpg" class="img-responsive"> 
     </div> 
     <img src="images/carousel-home/Bridge - 1200 by 420.jpg" alt="Second slide image" class="center-block img-responsive"> 
     </div> <!-- end of item --> 
     <div class="item"> 
     <div class="carousel-caption carouselTextBackground"> 
     <h2>The Right Choice for the job</h2> 
     </div> <!-- end carousel-caption --> 
     <div class="slideRight hidden-xs"> 
     <img src="images/carousel-home/Hangar - 1200 by 420.jpg" class="img-responsive"> 
     </div> 
     <div class="slideLeft hidden-xs"> 
     <img src="images/carousel-home/Bridge - 1200 by 420.jpg" class="img-responsive"> 
     </div> 
     <img src="images/carousel-home/Frame - 1200 by 420.jpg" alt="Third slide image" class="center-block img-responsive"> 
     </div> <!-- end of item --> 
     <!-- Controls --> 
     <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon   glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a> 
     <a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> 
     </div> 
     </div> 
     </div> <!-- end row --> 
    </header> <!-- end container --> 

這裏是CSS代碼：

#carousel1 { 
    position:relative; 
} 

.carousel-caption { 
    position:absolute; 
    right:0%; 
    bottom:0%; 
    left:0%; 
    z-index:999; 
    color:#fff; 
    text-align:left; 
} 

.carousel-caption h2 { 
    margin:0; 
    text-align:left; 
    color:#FFFFFF; 
} 

.carouselTextBackground { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    background-color: rgba(0,0,0,.4); 
    padding-left: 20px; 
    padding-top: 12px; 
} 

.slideRight { 
    position:absolute; 
    left:100%; 
    width:100%; 
    height:100%; 
    opacity:.5; 
} 

.slideLeft { 
    position:absolute; 
    right:100%; 
    width:100%; 
    height:100%; 
    opacity:.5; 
} 

.carousel-inner { 
    overflow:visible; 
} 

請幫我這個，因爲它是竊聽我很......和只是告訴我更好的方式來做到這一點，我不是要求你爲我做。非常感謝。

Answer 1

一個潛在的解決方案 - 將所有圖像，以降低不透明度，然後加大對.active旋轉木馬項目的不透明度：

.carousel-inner>.item>a>img, .carousel-inner>.item>img { 
    opacity: 0.5; 
} 

.carousel-inner>.active { 
    opacity: 1; 
} 

這是未經測試，但它應該工作。