Bootstrap Carousel in Rails

Question

I'm working a project that has several images inside of a folder. I've got Bootstrap working on my project, and was attempting to work in a carousel using this tutorial. It seems to be an ideal fit for my needs, but I'm having trouble mixing it into my Ruby view. Here's what I've got so far:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <% @patient.images.each do |image| %>
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <% end %>
  </ol>

  <!-- Wrapper for slides -->

      <div class="carousel-inner" role="listbox">
       <div class="item active">
        <% @patient.images.each do |image| %>
        <%= image_tag image.image_file.url %>
        <% end %>
        </div>
      </div>


<!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

I think I've got a syntax/order issue where my divs and my image tags lie, but moving them around doesn't change anything. What I'm trying to do is have a seperate slide for each image, but using the current code it seems to want to put all of the images in one slide.

Answer 1

This part:

<ol class="carousel-indicators">
  <% @patient.images.each do |image| %>
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <% end %>
</ol>

needs to be changed to something like:

<ol class="carousel-indicators">
  <% @patient.images.each_with_index do |image, index| %>
    <li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>"></li>
  <% end %>
</ol>

and this part:

<div class="carousel-inner" role="listbox">
 <div class="item active">
  <% @patient.images.each do |image| %>
    <%= image_tag image.image_file.url %>
  <% end %>
 </div>
</div>

needs to be like this:

<div class="carousel-inner" role="listbox">
  <% @patient.images.each_with_index do |image, index| %>     
    <div class="item <%= index == 0 ? 'active' : '' %>">
      <%= image_tag image.image_file.url %>
    <end>
  <% end %>
</div>

let me know if it works for you.

Answer 2

This is how i did it:

<ol class="carousel-indicators">
   <% @patient.images.each_with_index do |photo, n| %>
     <li data-target='#MyCarousel' data-slide-to="#{n}" class="#{'active' if n == 0}"></li>
   <% end %>
</ol>

<div class="carousel-inner" role="listbox">
  <div class="item active">
    <%= image_tag @patient.images.first.image_file.url %>
  </div>
  <% @patient.images.drop(1).each do |photo| %>
     <div class="item">
       <%= image_tag photo.image_file.url %>
     </div>
  <% end %>
</div>