幻灯片处于活动状态时，将轮播自定义按钮设置为活动

Question

我有一个经典的bootstrap轮播，但有一些修改。基本上如下图所示，我有一个图表图像的旋转木马。在旋转木马的顶部还有另一行带有自定义选择按钮（销售和门票）。

问题是我想将活动类添加到连接到该幻灯片的按钮。下面我提供了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');
    });

＆＃13;

＆＃13;

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

＆＃13;

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

.car-ind{
  color: grey;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;