2016-10-09 18 views
0

我想在列表處於活動狀態時仍然更改列表。我的旋轉木馬會默認在某個時間自動移動,當它移動相應的列表class應該是active,並且該顏色應該自動改變。如何在傳送帶自動移動時設置活動列表樣式?

這是我的代碼:

<div class="container"> 
    <div class="row"> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="images/blue.jpg"> 
         <div class="container"> 
          <div class="carousel-caption"> 
          </div> 
         </div> 
       </div> 
       <div class="item"> 
        <img src="images/purple.jpg"> 
        <div class="container"> 
         <div class="carousel-caption"> 

         </div> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="images/red.jpg"> 
        <div class="container"> 
         <div class="carousel-caption"> 

         </div> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/1694x1131/777"> 
        <div class="container"> 
        <div class="carousel-caption"> 

        </div> 
       </div> 
      </div> 


      </div> 

      <div class="carousel-buttons"> 
       <div class="col-xs-3 text-center" style="background-color:orange;height:50px; padding:10px;"><a class="active" data-target="#myCarousel" data-slide-to="0" href="#">TECHNOLOGY</a></div> 

       <div class="col-xs-3 text-center" style="background-color:orange;height:50px; padding:10px;"><a data-target="#myCarousel" data-slide-to="1" href="#">TRADING</a></div> 

       <div class="col-xs-3 text-center" style="background-color:orange;height:50px; padding:10px;"><a data-target="#myCarousel" data-slide-to="2" href="#">CONTRACTING</a></div> 

       <div class="col-xs-3 text-center" style="background-color:orange;height:50px; padding:10px;"><a data-target="#myCarousel" data-slide-to="3" href="#">TRAFFIC</a></div> 
      </div>  

     </div> 


    </div> 
</div> 

Output 第一張照片是技術,2交易,3承包,4交通

當傳送帶移動它不會自動class="active"設置。

這些鏈接應該像旋轉木馬指標

回答

1

使用類=「旋轉木馬指標」,而不是階級=「轉盤式按鈕」。所以「主動」會自動改變。

+0

感謝它的工作 – Faisal