Question

我使用Bootstrap 3创建了一个旋转木马。我正在尝试从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>

<script>
 $('.carousel').on('slid.bs.carousel', function () {
  var currentIndex = $('div.active').index() + 1;
 });
</script>

用h1内容替换Bootstrap 3箭头

0 个答案: