JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item">
            <img src="http://placehold.it/200&text=1">
        </div>
        <div class="item active">
         <img src="http://placehold.it/200&text=2">
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

JavaScript

$('#carousel-example-generic').carousel({interval:15000});


 $('#carousel-example-generic').on('slid.bs.carousel', function() {
    $('#carousel-example-generic .carousel-inner .item').each(function() {
      if ($(this).hasClass('active')) {
       $('#carousel-example-generic .carousel-inner .item').attr('data-active','someinfo');
       $(this).attr('data-active','someinfo');
      }
    });
  });