Question

我在图像模型中有很少的图像（比如4），而@all_album_pics实例包含所有图像。我正在尝试实现图片幻灯片。

javascript：在同一页上

<script>
  $('document').ready(function(){
  $('.carousel').carousel();
 });
</script>

轮播代码：

 <div id="carousel-example-generic" class="carousel slide" data- ride="carousel">
<!-- Indicators -->
 <ol class="carousel-indicators">
  <% @all_album_pics.each_with_index do |pics, index| %>
   <%if(index==0)%>    
       <li data-target="#carousel-example-generic" data-slide-to="#{index}" class="active"></li>    
   <%else%>    
       <li data-target="#carousel-example-generic" data-slide-to="#{index}"></li>    
  <%end%>
  <%#= @all_album_pics.count %>
  <%end%> 
 </ol>

  <!-- Wrapper for slides -->


 <div class="carousel-inner" role="listbox">

   <% @all_album_pics.each_with_index do |pics, index| %>
      <%if(index==0)%>    
        <div class="item active">        
          <img src="<%= pics.avatar.url(:medium) %>" alt="...">    
        </div>
     <% else %>    
     <div class="item">        
        <img src="<%= pics.avatar.url(:medium) %>" alt="...">    
     </div>    
   <%end%>
 <%end%> 

</div>

 <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
  <span class="sr-only">Next</span>
</a>

<%= link_to 'Edit', edit_album_path(@album) %> |
<%= link_to 'Back', albums_path %>

但输出是第一张幻灯片上显示的所有图像。我无法将每个图片网址分成不同的div（如果用户上传了一张新图片，则应该会在幻灯片中显示）。

需要帮助。

Answer 1

好的，所以我不知道ruby-on-rails的模板，但会在修改之后按照你期望的方式对代码进行评论:)我的评论将被包含在{%{ }%}内，我希望有所帮助：）

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
{%{ incremental variable i=0 }%}
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    {%{ foreach slide }%}
    <div class="item {%{ if item.iteration == 0 }%}active{%{ /end if }%}">
      <img src="..." alt="...">
    </div>
    {%{ i++ }%}
    {%{ end foreach }%}
  </div>

<!-- Indicators -->
  <ol class="carousel-indicators">
  {%{ for k=0, k<=i, k++ //it can be same foreach, it's just lightweighted version without need to loop another time the same array }%}
    <li data-target="#carousel-example-generic" data-slide-to="{%{ k }%}" {%{ if k==0 }%}class="active"{%{ /end if }%}></li>
  {%{ end for }%}
  </ol>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 2

问题在于 application.js 我需要删除

//= require twitter/bootstrap ..

（我正在使用twitter bootstrap gem）。

使用旋转木马的图像幻灯片

2 个答案: