Showing items as in a Carousel Is there a better way to implement my carousel in less lines?



&lt;div id="myCarousel" class="carousel slide"&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;% @photos.each_with_index do |photo, index| %&gt;
      &lt;% if index == 0 %&gt;
      &lt;div class="item active"&gt;
        &lt;img src="&lt;%= photo.image_url(:large) %&gt;" alt="&lt;%= photo.title %&gt;"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;TITLE&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;% end %&gt;
      &lt;% if index == 1 %&gt;
      &lt;div class="item"&gt;
        &lt;img src="&lt;%= photo.image_url(:large) %&gt;" alt="&lt;%= photo.title %&gt;"&gt;
      &lt;/div&gt;
      &lt;% end %&gt;
      &lt;% if index == 2 %&gt;
      &lt;div class="item"&gt;
        &lt;img src="&lt;%= photo.image_url(:large) %&gt;" alt="&lt;%= photo.title %&gt;"&gt;
      &lt;/div&gt;
      &lt;% end %&gt;
      &lt;% if index == 3 %&gt;
      &lt;div class="item"&gt;
        &lt;img src="&lt;%= photo.image_url(:large) %&gt;" alt="&lt;%= photo.title %&gt;"&gt;
      &lt;/div&gt;
      &lt;% end %&gt;
      &lt;% if index == 4 %&gt;
      &lt;div class="item"&gt;
        &lt;img src="&lt;%= photo.image_url(:large) %&gt;" alt="&lt;%= photo.title %&gt;"&gt;
      &lt;/div&gt;
      &lt;% end %&gt;
      &lt;% if index == 5 %&gt;
      &lt;div class="item"&gt;
        &lt;img src="&lt;%= photo.image_url(:large) %&gt;" alt="&lt;%= photo.title %&gt;"&gt;
      &lt;/div&gt;
      &lt;% end %&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
&lt;/div&gt;&lt;!-- /.carousel --&gt;
Get rid of unnecessary code:

&lt;div id="myCarousel" class="carousel slide"&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;% @photos.each_with_index do |photo, index| %&gt;
      &lt;% if index.zero? %&gt;
      &lt;div class="item active"&gt;
        &lt;img src="&lt;%= photo.image_url(:large) %&gt;" alt="&lt;%= photo.title %&gt;"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;TITLE&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;% else %&gt;
      &lt;div class="item"&gt;
        &lt;img src="&lt;%= photo.image_url(:large) %&gt;" alt="&lt;%= photo.title %&gt;"&gt;
      &lt;/div&gt;
      &lt;% end %&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
&lt;/div&gt;


Move stuff to helpers:

module PhotoHelpers
  def slider_image(photo)
    image_tag photo.image_url(:large), alt: photo.title
  end
end

&lt;div id="myCarousel" class="carousel slide"&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;% @photos.each_with_index do |photo, index| %&gt;
      &lt;% if index.zero? %&gt;
        &lt;div class="item active"&gt;
          &lt;%= slider_image photo %&gt;
          &lt;div class="container"&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h1&gt;TITLE&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;% else %&gt;
        &lt;div class="item"&gt;
          &lt;%= slider_image photo %&gt;
        &lt;/div&gt;
      &lt;% end %&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
&lt;/div&gt;