控制消失後實現對旋轉木馬的淡入淡出效果

Question

我正在使用一個正常的Bootstrap模板，在主頁上我有這個滑塊。因爲它是一個簡單的，我想淡入淡出效果添加到它..我沒有... 只需添加此代碼到我的CSS

.carousel.fade { 
opacity: 1; } 

    .carousel.fade .item { 
    -moz-transition: opacity ease-in-out .7s; 
    -o-transition: opacity ease-in-out .7s; 
    -webkit-transition: opacity ease-in-out .7s; 
    transition: opacity ease-in-out .7s; 
    left: 0 !important; 
    opacity: 0; 
    top: 0; 
    position: absolute; 
    width: 100%; 
    display: block !important; 
    z-index: 1; 
} 

    .carousel.fade .item:first-child { 
     top: auto; 
     position: relative; 
    } 

    .carousel.fade .item.active { 
     opacity: 1; 
     -moz-transition: opacity ease-in-out .7s; 
     -o-transition: opacity ease-in-out .7s; 
     -webkit-transition: opacity ease-in-out .7s; 
     transition: opacity ease-in-out .7s; 
     z-index: 2; 
    } 

，然後我改變了類轉盤至carousel-褪色。幸運的是，這個作品。我有淡出效果，但是我的控件（箭頭）用於切換下一張和上一張幻燈片突然消失。我很長時間以來感到困惑，我無法理解一個簡單的淡入淡出效果如何使滑塊的控件消失。技術上他們在那裏，但不知何故，他們不可見。這是我的HTML代碼藏漢

<div id="carousel-example-generic" class="carousel fade"> 
        <!-- indicators for the slider --> 
        <ol class="carousel-indicators hidden-xs"> 
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="4"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="5"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="6"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="7"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="8"></li> 
        </ol> 

        <!-- images for the slider --> 
        <div id="carousel" class="carousel fade"> 
         <div class="item active"> 
          <img class="img-responsive img-full" src="img/slider8.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slider1.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slider2.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slider3.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slider4.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slider5.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slider6.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slider7.png" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slider9.jpg" alt=""> 
         </div> 
        </div> 

        <!-- Controls for the slider--> 
        <a class="left carousel-control" data-slide="prev"> 
         <span class="icon-prev"></span> 
        </a> 
        <a class="right carousel-control" data-slide="next"> 
         <span class="icon-next"></span> 
        </a> 
       </div> 

Answer 1

這個類添加到你的CSS，

.carousel-control { z-index: 2; } 

這事發生，因爲你給了一個z-index:2您.carousel.fade .item.active類。所以滑塊圖像出現在控件之上。

編輯：

你必須改變你的HTML這樣的你的這一部分，以使按鈕的工作

<!-- Controls for the slider--> 
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="icon-prev"></span> 
</a> 
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="icon-next"></span> 
</a>