I have a Drupal 7 site that has 2 Bootstrap carousels.
- One that rotates automatically and takes up the width of the page.
- 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.