title: Meteor and Bootstrap Carousel
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is my carousel html:</p>
  
  <pre><code>&lt;template name="blog"&gt;
    &lt;div class="carousel slide" data-ride="carousel" id="blog-carousel"&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li class="active" data-slide-to="0" data-target="#carousel-example-generic"&gt;&lt;/li&gt;
        &lt;li data-slide-to="1" data-target="#carousel-example-generic"&gt;&lt;/li&gt;
        &lt;li data-slide-to="2" data-target="#carousel-example-generic"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      {{&gt; carouselList}}
      &lt;a class="left carousel-control" data-slide="prev" href="#blog-carousel" role="button"&gt;
        &lt;span aria-hidden="true" class="icon-prev"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" data-slide="next" href="#blog-carousel" role="button"&gt;
        &lt;span aria-hidden="true" class="icon-next"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And here is my List looping as well as the individual carousel item:</p>
  
  <pre><code>&lt;template name="carouselList"&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      {{#each carouselItems}}
        {{&gt; carouselItem}}
      {{/each}}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;template name="carouselItem"&gt;
    &lt;div class="carousel-item"&gt;
      &lt;img alt="{{title}}" src="{{imageUrl}}"&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>These are my helpers for the list: </p>
  
  <pre><code>Template.carouselList.helpers({
       carouselItems: function(){
         return Posts.find({}, {sort: {timeCreated: -1}})
  
       }
  });
  
  Template.carouselItem.rendered = function () {
    this.$('.carousel-item').first().addClass('active');
  };
  </code></pre>
  
  <p>I was trying to use jQuery to add an active class to the items. However, that adds the active class to all of them.</p>
  
  <p>I am still a beginner in Meteor so I would be very grateful for a hint in the right direction! </p>