Warum bekomme ich dieses Verhalten mit meinem Bootstrap 3 Karussell?

Question

Ich versuche this effect mit meinem eigenen Karussell zu erreichen, das auf der rechten und linken Seite halbtransparente Bilder hat; aber ich bekomme diesen schlechten Effekt mit meinem eigenen Projekt, wenn ich zwischen den Dias wechsle: here. Hier

ist der HTML-Code, den ich schrieb:

<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 --> 

und hier ist der CSS-Code:

#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; 
} 

Bitte helfen Sie mir mit diesem, weil es mich sehr nervt ... und Sag mir einfach den besseren Weg, und ich bitte dich nicht, es für mich zu tun. Danke vielmals.

Answer 1

Eine mögliche Lösung - alle Bilder eingestellt Opazität zu senken, erhöhen Sie die Opazität auf dem .active Karussell Artikel:

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

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

Dies ist nicht getestet, aber es sollte Arbeit.