how to use for loop with bootstrap carousel

I have figured out how to use bootstrap carousel but problem is I want to render my featured stories to be in the carousel. currently I have a carousel that shows three slides, but what I'm trying to do is to have featured stories instead of the three slides.

 <div class='carousel slide' id="myCarousel">

      <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
        <li class="active" data-slide-to="1" data-target="#myCarousel"></li>
        <li class="active" data-slide-to="2" data-target="#myCarousel"></li>
      </ol>


      <div class="carousel-inner">
        <div class="item active" id="slide1">
          <img src="http://i.imgur.com/SQ691ZO.jpg" >
          <div class="carousel-caption">
            <h4>hello</h4>
            <p>hi you</p>
          </div>
        </div>

        <div class="item" id="slide2">
          <img src="http://i.imgur.com/zN4h51m.jpg" >

          <div class="carousel-caption">
            <h4>hello</h4>
            <p>hi you</p>
          </div>
        </div>

        <div class="item" id="slide3">
          <img src="http://i.imgur.com/3ruWvoG.jpg">

          <div class="carousel-caption">
            <h4>hello</h4>
            <p>hi you</p>
          </div>
        </div>
      </div>

      <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
      <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>

So this is what I tried that's not quite working. I have

    {% for a in featuredStory %}
    {{a.title}}
    {{a.sub}}
 <img src='{{a.get_featuredImage_url}}' class="img-rounded" alt="Cinque Terre" width="330" height="236"/>

    {% endfor %}

working fine, but problem is to incorporate these with carousel. with one featured story it works but with more than one, I get one in the top one in the bottom.

Here;s what I tried

<div class="row">
  <div class="col-sm-8">
    {% for a in featuredStory %}

    <div class='carousel slide' id="myCarousel">

      <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
        <li class="active" data-slide-to="1" data-target="#myCarousel"></li>
        <li class="active" data-slide-to="2" data-target="#myCarousel"></li>
      </ol>


      <div class="carousel-inner">
        <div class="item active" id="slide1">
 <img src='{{a.get_featuredImage_url}}' class="img-rounded" alt="Cinque Terre" width="330" height="236"/>          <div class="carousel-caption">
            <h4>    {{a.title}}</h4>
            <p>     {{a.sub}}
</p>
          </div>
        </div>




      </div>
      <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
      <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>

{% endfor %}

    </div>
  </div>