スライドがアクティブなときにカルーセルカスタムボタンをアクティブに設定します。

Question

私は古典的なブートストラップカルーセルを持っていますが、いくつかの変更があります。基本的には、下の画像でわかるように、私はチャート画像のカルーセルを持っています。カルーセルの上にカスタムセレクトボタン（セールスとチケット）がある別の行があります。

問題は、そのスライドに接続されたボタンにアクティブなクラスを追加したいということです。以下は、htmlとjqueryの両方の画像を提供します。 HTMLのための HTML

のjQuery

コード

$('#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>