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> 

讓我知道它是否適合你。