Meteor and Bootstrap Carousel

I am working on a blog project in Meteor and I use Bootstrap 4 in the frontend. I now want do display a blog page where the a Bootstrap carousel cycles through the 3 most recent posts.

Bootstrap requires the first post to have a class of active from the beginning. With my Meteor helpers I seem to not be able to get this code working.

Here is my carousel html:

<template name="blog">
  <div class="carousel slide" data-ride="carousel" id="blog-carousel">
    <ol class="carousel-indicators">
      <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
      <li data-slide-to="1" data-target="#carousel-example-generic"></li>
      <li data-slide-to="2" data-target="#carousel-example-generic"></li>
    </ol>
    {{> carouselList}}
    <a class="left carousel-control" data-slide="prev" href="#blog-carousel" role="button">
      <span aria-hidden="true" class="icon-prev"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" data-slide="next" href="#blog-carousel" role="button">
      <span aria-hidden="true" class="icon-next"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</template>

And here is my List looping as well as the individual carousel item:

<template name="carouselList">
  <div class="carousel-inner" role="listbox">
    {{#each carouselItems}}
      {{> carouselItem}}
    {{/each}}
  </div>
</template>

<template name="carouselItem">
  <div class="carousel-item">
    <img alt="{{title}}" src="{{imageUrl}}">
  </div>
</template>

These are my helpers for the list:

Template.carouselList.helpers({
     carouselItems: function(){
       return Posts.find({}, {sort: {timeCreated: -1}})

     }
});

Template.carouselItem.rendered = function () {
  this.$('.carousel-item').first().addClass('active');
};

I was trying to use jQuery to add an active class to the items. However, that adds the active class to all of them.

I am still a beginner in Meteor so I would be very grateful for a hint in the right direction!

Answer

You will need to set it active before the template has rendered if you’re using the latest meteor version we can check for the {{#each}} index with @index and if it’s first loop assign active here is a demo, Maybe there are better ways but this should work just fine.

<template name="carouselList">
  <div class="carousel-inner" role="listbox">
    {{#each carouselItems}}
      {{> carouselItem title=title imageUrl=imageUrl [email protected]}}
    {{/each}}
  </div>
</template>

<template name="carouselItem">
  <div class="carousel-item {{isActive}}">
    <img alt="{{title}}" src="{{imageUrl}}">
  </div>
</template>

Template.caruselItem.helpers({
  isActive: function () {
    return (this.index === 0) ? 'Active': '';
  }
});

p.s the above will work if bootstrap needs to have the active before you render if they make use of it, if it’s just CSS you can change your code to make it work just move this.$('.carousel-item').first().addClass('active'); to the carouselList onRendered. Because now you do it 3 times basically on all of them.