title: Twitter Bootstrap Rails Carousel
body: <pre><code>&lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
        &lt;!-- Indicators --&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;  &lt;/li&gt;
          &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;/ol&gt;
  
       &lt;!-- Wrapper for slides --&gt;
       &lt;div class="carousel-inner row homepage_nav"&gt;
        &lt;% @carousel_article.each do |carousel|%&gt;
          &lt;div class="item active col-md-8"&gt;
            &lt;% if carousel.photos.exists? %&gt;
              &lt;% carousel.photos.first do |p| %&gt;
                &lt;%= image_tag p.image.url(:medium), :class=&gt; "img-responsive" %&gt;
              &lt;% end %&gt;
            &lt;% else %&gt;
              &lt;img src="http://placehold.it/400x300" class="img-responsive"&gt;
            &lt;% end %&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;%= carousel.title %&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;% end %&gt;
    &lt;/div&gt;
  
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
      &lt;!--span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span--&gt;
      &lt;div class="col-xs-2 control"&gt;
           &lt;img src="&lt;%= image_url "left_carousel.png" %&gt;" class="img-responsive"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
      &lt;!--span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span--&gt;
      &lt;div class="col-xs-2 control"&gt;
          &lt;img src="&lt;%= image_url "right_carousel.png" %&gt;" class="img-responsive"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to show the first photo for each article in one pane of the carousel. As it stands, the entire list is showing and its fugly. I know its a problem somewhere in my loop. Help please!!! </p>
  
  <p>In my controller:</p>
  
  <pre><code>@carousel_article= Article.all.order(created_at: :desc)
  </code></pre>