Bootstrap Carousel in Rails

Question

我正在开发一个项目，其中包含多个图片。我有Bootstrap正在处理我的项目，并试图在使用this tutorial的轮播中工作。它似乎是适合我需求的理想选择，但我无法将其混入到我的Ruby视图中。下面是我到目前为止有：

<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> 

我想我有一个语法/顺序问题，即我的div和我的形象标签撒谎，但走动他们不会改变任何东西。我想要做的是为每张图片分别放置一张幻灯片，但使用当前代码似乎希望将所有图片放在一张幻灯片中。

Answer 1

这是我做的：

<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> 

Answer 2

这一部分：

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

需要改变的东西，如：

<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> 

这部分：

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

需求是这样的：

<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> 

让我知道它是否适合你。