Getting Bootstrap Carousel to set Active class?

Question

I have a Drupal 7 site that has 2 Bootstrap carousels.

1. One that rotates automatically and takes up the width of the page.
2. One that has 3 smaller items and only when the page is narrowed (e.g. on mobile device) does it need to rotate.

The first carousel works fine.

The second carousel does rotate until I manually add the "Active" to the class. Once I do it then begins to auto-rotate between the items.

<div id="carousel-posts" class="carousel slide carousel-posts" data-ride="carousel">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item ">...</div>
    <div class="item ">...</div>
    <div class="item active">...</div>
    <div class="item ">...</div>
  </div>
</div>

I am trying to figure out how to set one of the items as " active" when the page loads so that if the page is on mobile or resized to small enough it begins to auto-rotate.

I use nodequeue to order the items and bootstrap view to lay them out.

Thank you for any direction you can point me to.

Answer 1

Looks like a bug occurs on this line for the 2nd Carousel where $key never equals $first_key – No Sssweat

That's exactly the answer!

  <!-- Carousel items -->
  <div class="carousel-inner" role="listbox">
    <?php foreach ($rows as $key => $row): ?>
      <div class="item <?php if ($key == $first_key) {print 'active';
     } ?>">
        <?php print $row ?>
      </div>
    <?php endforeach ?>
  </div>

Whoever set up the site or theme commented out the part about printing "active" in the class list. Probably so it wouldn't auto-rotate, but unfortunately it also made it become hidden when the screen is made narrow.