我试图通过我自己的旋转木马实现这种效果,旋转木马的左右两侧都有半透明的图像; 但是当我在幻灯片之间移动时,我对自己的项目产生了这种不良影响:这里.
这是我写的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> …Run Code Online (Sandbox Code Playgroud)