Question

我还是Rails初学者，还有很多需要学习的地方。

目前，我可以一次显示所有图像，没问题：

<!-- For the Thumbnail strip -->
<% @examples.each do |e| %>
    <ul class="example-grid"><%= e.description %></ul>
    <% if e.image.url != "/images/original/missing.png"  %>
        <p><%= image_tag e.image.url, size: "200x200" %></p>
    <% end %>
<% end %>

但我想首先展示@examples[0]的图片，然后从那里有两个link_to或button_to路径来显示@example[current + 1]。这样的事情。

这是如何工作的？

谢谢SOF社区！

Answer 1

您可以使用Jquery Sliders，图片幻灯片插件 Image Slide show demo link

Answer 2

尝试bootstrap carousel并像现在一样生成html：

http://getbootstrap.com/javascript/#carousel

<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <% @examples.each_with_index do |e, index| %>
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="<%= index %>" class="<%= if e.primary ? "active" : "" %>></li>
  </ol>
  <% end %>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
  <% @examples.each do |e| %>
    <div class="item active">
<% if e.image.url != "/images/original/missing.png"  %>
    <p><%= image_tag e.image.url, size: "200x200" %></p>
<% end %>
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>

Rails图像阵列 - 创建将显示下一个/上一个图像的链接

2 个答案: