时间戳

首页 > 解决方案 > 带有语义 UI 滑轨的图像循环

ruby-on-rails - 带有语义 UI 滑轨的图像循环

问题描述

我正在尝试使用此处的自定义 UI 语义滑块循环附加到帖子的一些图像。这是我迄今为止尝试过的，但它只显示循环中的第一张图像。

  <div class="ui text container slides">
    <i class="small left angle icon"></i>
    <i class="small right angle icon"></i>
    <div class="slide active ">
    <% @job.images.each_with_index do |image, index| %>
        <%= image_tag image %>
        <% end %>
    </div>
  </div>

这是自定义滑块：

<div class="ui container">
  <div class="ui text container slides">
    <i class="big left angle icon"></i>
    <i class="big right angle icon"></i>
    <div class="slide active">
      <h1>Slide one</h1>
      <p>Plain text.</p>
    </div>
    <div class="inverted shadow blurred image slide">
      <h1>Slide two</h1>
      <p>Background image using <code>.inverted</code>, <code>.shadow</code>, and <code>.blurred</code>:</p>
      <p><code>class="inverted shadow blurred image slide"</code></p>
    </div>
    <div class="inverted salmon faded slide">
      <h1>Slide three</h1>
      <p>Background color using <code>.inverted</code>, <code>.salmon</code>, and <code>.faded</code>:</p>
      <p><code>class="inverted faded salmon slide"</code></p>
    </div>
  </div>
</div>

我没有任何滑块的原始代码：

<% if @job.images.attached? %>
<% (0...@job.images.count).each do |image| %>

<%= image_tag(@job.images[image]) %>

<% end %>
    <% else %>
        <%= image_tag "missing.jpg" %>

                <% end %>

标签： ruby-on-railssemantic-ui

解决方案

如果要在滑块中显示图像，则需要在循环内移动 div。像这样：

<div class="ui text container slides">
    <i class="small left angle icon"></i>
    <i class="small right angle icon"></i>
    <% @job.images.each_with_index do |image, index| %>
            <div class="slide">
               <%= image_tag image %> 
            </div> 
     <% end %>
</div>

推荐阅读