Javascript 将引导3箭头替换为h1内容

我已经用Bootstrap3创建了一个旋转木马。我试图从H1标签中提取文本，使其成为上一个/下一个箭头。例如：如果幻灯片2是活动幻灯片，则上一个箭头应显示“幻灯片1”，下一个箭头应显示“幻灯片3”，而不是显示箭头图标。在幻灯片中循环等等

这是我的通用旋转木马代码。我希望使用jQuery设置此功能，并使其成为动态的，以便将来如果我添加更多幻灯片，它将获得新的h1标记

 <div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <h1>Slide 1</h1>
      <img src="http://lorempixel.com/output/animals-q-c-640-480-4.jpg" alt="...">
      <div class="carousel-caption">
        Caption 1
      </div>
    </div>
    <div class="item">
      <h1>Slide 2</h1>
      <img src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" alt="...">
      <div class="carousel-caption">
        Caption 2
      </div>
    </div>
    <div class="item">
      <h1>Slide 3</h1>
      <img src="http://lorempixel.com/output/animals-q-c-640-480-10.jpg" alt="...">
      <div class="carousel-caption">
        Caption 3
      </div>
    </div>
 </div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">Prev</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">Next</a>

幻灯片1
标题1
幻灯片2
标题2
幻灯片3
标题3

$（'.carousel'）.on（'slided.bs.carousel'，函数（）{
var currentIndex=$（'div.active'）.index（）+1；
});

-使用

slided.bs.carousel

事件根据

活动的
幻灯片更新文本。@Blazemonger我从该事件开始，我只是不确定如何在活动幻灯片前后定位该幻灯片。请看一看感谢@gaetanoM！成功了！
<script>
 $('.carousel').on('slid.bs.carousel', function () {
  var currentIndex = $('div.active').index() + 1;
 });
</script>