javascript - 为什么我的 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;
}

这是未经测试的，但它应该有效。