I'm attempting to replicate this visual effect in my own carousel, featuring semi-transparent images on the left and right sides. However, I'm encountering a negative result with my project when transitioning between slides at : here.
This is the HTML code I've written :
<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's 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 provide assistance with this issue as it's causing me quite a headache... Your guidance on how to improve it would be greatly appreciated. Thank you.