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

이 안된이지만, 해야 작동합니다.