Twitter Bootstrap Caurosel.js和Rails

Question

如何在Rails中实现TwitterBootstrap.Carousel.js "活动项"标签,一切正常？

这个食谱:

<div id="myCarousel" class="carousel">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

如何将其与以下内容混合:

<% @items.each do |item| %>
    <% item.item_images.each do |item_image| %>
        <%= link_to(image_tag(item_image.image.url), item_image.image.url) %>
    <% end %>
<% end %> 

Answer 1

您只需将活动类添加到列表中的第一个项目,否则它们都会显示.我通过利用来解决这个问题each_with_index.

<% @items.each do |item| %>
    <% item.item_images.each_with_index do |item_image, index| %>
        <div class="<% if index == 0 %>active<% end %>">
           <%= link_to(image_tag(item_image.image.url), item_image.image.url, ) %>
        </div>
    <% end %>
<% end %> 

当然,这可以重构一下.