0

I've created a carousel using Bootstrap 3. I'm trying to pull the text from the H1 tags to become the prev/next arrows. For example: If Slide 2 is the active slide, the prev arrow should display "Slide 1" and the next arrow should display "Slide 3" instead of displaying arrow icons. So on and so forth with cycling through the slides.

This is my generic carousel code. I would like to set this functionality up using jQuery and have it be dynamic, so that in the future if I add more slides it will pick up the new h1 tags.

 <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>
L8dySneaks
  • 1
  • 3

0 Answers0