5

I am trying to achieve this effect with my own carousel which has a semi-transparent images on the right and left sides; but I am getting this bad effect with my own project when moving between slides : here.

Here is the HTML code that I wrote :

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

and here is the CSS code : 

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

Please help me with this because it is bugging me very much... and just tell me the better way to do it and I am not asking you to do it for me. Thanks a lot.

fawzi-k
  • 51
  • 2

1 Answers1

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.

Toby
  • 12,743
  • 8
  • 43
  • 75