Getting Bootstrap Carousel to set Active class?


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.