5

我正在尝试用我自己的轮播来实现这种效果，它的左右两侧都有半透明的图像；但是在幻灯片之间移动时，我自己的项目会产生这种不良影响：这里。

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

请帮我解决这个问题，因为它让我非常烦恼......并告诉我更好的方法，我不是要你为我做。非常感谢。

4

1 回答 1

0

One potential solution - set all images to lower opacity, then increase the opacity on the .active carousel item:

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

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

This is untested, but it should work.

于 2016-07-24T18:58:44.293 回答