0

我使用 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>
4

0 回答 0