为啥我的 Bootstrap 3 轮播会出现这种行为？

Posted 2023-03-06

【中文标题】为啥我的 Bootstrap 3 轮播会出现这种行为？

【英文标题】：Why am I getting this behavior with my Bootstrap 3 carousel?为什么我的 Bootstrap 3 轮播会出现这种行为？

【发布时间】：2016-11-27 05:45:33

【问题描述】：

我正在尝试使用我自己的旋转木马实现this effect，它的左右两侧都有半透明的图像；但是在幻灯片之间移动时，我自己的项目会产生这种不良影响：here。

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

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

【参考方案1】：

一种可能的解决方案 - 将所有图像设置为较低的不透明度，然后增加 .active 轮播项目的不透明度：

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


.carousel-inner>.active 
    opacity: 1;

这是未经测试的，但它应该工作。