幻燈片處於活動狀態時，將傳送帶自定義按鈕設置爲活動狀態

Question

我有一個經典的引導程序傳送帶，但進行了一些修改。基本上，您可以通過下面的圖像看到，我有一個圖表圖像輪播。在旋轉木馬之上還有另一排自定義選擇按鈕（銷售和門票）。

問題是我想將活動類添加到連接到該幻燈片的按鈕上。下面我提供了html和jquery的圖像。 HTML

jQuery的

代碼HTML

$('#carousel-example-generic').on('slid.bs.carousel', function (event) { 
 
      var nextactiveslide = $(event.relatedTarget).index(); 
 
      var $btns = $('.custom-carousel-btns'); 
 
      var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']"); 
 
      // alert(nextactiveslide); 
 
      $btns.find('.car-ind').removeClass('active'); 
 
      $active.find('.car-ind').addClass('active'); 
 
     });

/* Charts Carousel */ 
 
.carousel-inner > .item > img{ 
 
    margin: 0 auto; 
 
} 
 

 
.car-ind{ 
 
    color: grey; 
 
} 
 

 
.custom-carousel-btns .active{ 
 
    color: black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Reports</h3><img src="" class="img-responsive panel-img"> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <!-- Carousel Controls --> 
 
    <div class="row" style="border-bottom: 1px solid #eee; padding-bottom: 10px;"> 
 
     <div class="col-sm-2 custom-carousel-btns"> 
 
     <span><a href="#carousel-example-generic" class="car-ind active" role="button" data-slide-to="0">Sales</a></span> 
 
     <span><a href="#carousel-example-generic" class="car-ind" role="button" data-slide-to="1">Tickets</a></span> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 
 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="item active"> 
 
      <img src="http://via.placeholder.com/350x150" class="img-responsive" style="width: 100%; height: auto;" alt="..."> 
 
      </div> 
 
      <div class="item"> 
 
      <img src="http://via.placeholder.com/350x150" class="img-responsive" style="width: 100%; height: auto;" alt="..."> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

預先感謝您

Answer 1

試試這個： -

$('#carousel-example-generic').on('slid.bs.carousel', function (event) { 
     var nextactiveslide = $(event.relatedTarget).index(); 
     var $btns = $('.car-ind'); 
     $btns.removeClass('active'); 
     var $activeBtn = $("[data-slide-to='" + nextactiveslide + "']").addClass('active'); 
    }); 

$('#carousel-example-generic').on('slid.bs.carousel', function (event) { 
 
     var nextactiveslide = $(event.relatedTarget).index(); 
 
     var $btns = $('.car-ind'); 
 
     //var $active = $btns.find("[data-slide-to='" + nextactiveslide + "']"); 
 
     // alert(nextactiveslide); 
 
     $btns.removeClass('active'); 
 
     var $activeBtn = $("[data-slide-to='" + nextactiveslide + "']").addClass('active'); 
 
     // console.log($(".active", event.target).index()); 
 
     // $btns.find('.car-ind').removeClass('active'); 
 
     // $active.find('.car-ind').addClass('active'); 
 
    });

/* Charts Carousel */ 
 
.carousel-inner > .item > img{ 
 
    margin: 0 auto; 
 
} 
 

 
.car-ind{ 
 
    color: grey; 
 
} 
 

 
.custom-carousel-btns .active{ 
 
    color: black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title"><i class="fa fa-long-arrow-right fa-fw"></i> Reports</h3><img src="" class="img-responsive panel-img"> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <!-- Carousel Controls --> 
 
    <div class="row" style="border-bottom: 1px solid #eee; padding-bottom: 10px;"> 
 
     <div class="col-sm-2 custom-carousel-btns"> 
 
     <span><a href="#carousel-example-generic" class="car-ind active" role="button" data-slide-to="0">Sales</a></span> 
 
     <span><a href="#carousel-example-generic" class="car-ind" role="button" data-slide-to="1">Tickets</a></span> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 
 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="item active"> 
 
      <img src="http://via.placeholder.com/350x150" class="img-responsive" style="width: 100%; height: auto;" alt="..."> 
 
      </div> 
 
      <div class="item"> 
 
      <img src="http://via.placeholder.com/350x150" class="img-responsive" style="width: 100%; height: auto;" alt="..."> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>