为什么我的Bootstrap 3轮播会出现这种情况？

Question

我试图通过我自己的旋转木马实现这种效果,旋转木马的左右两侧都有半透明的图像; 但是当我在幻灯片之间移动时,我对自己的项目产生了这种不良影响:这里.

这是我写的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;
}

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