Bu davranışımı neden Bootstrap 3 karuselimle alıyorum?

Question

this effect'u sağ ve sol taraflarda yarı saydam görüntülere sahip kendi karuselimle elde etmeye çalışıyorum; ama bu kötü etkiyi kendi projemde slaytlar arasında hareket ederken alıyorum: here. İşte

Yazdığım HTML kodu aşağıdadır:

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

ve burada CSS kodu şudur: beni çok rahatsız eden, çünkü

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

bana bu konuda yardımcı olun ... ve sadece bana bunu yapmanın daha iyi bir yolu söyle ve ben senin için bunu yapmanı istemiyorum. Çok teşekkürler. -

Answer 1

potansiyel bir çözelti daha sonra, opacity düşük .active atlıkarınca öğe üzerinde opaklığı arttırmak için tüm görüntüleri ayarlayın:

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

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

Bu denenmemiş, ama gerektiği eser.