带语义的图像循环 UI 滑块 rails

Image Loop with Semantic UI slider rails

我正在尝试使用来自 here 的自定义 UI 语义滑块循环附加到 post 的一些图像。这是我到目前为止尝试过的方法,但它只显示循环中的第一张图像。

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

您实际上需要将每个图像添加到不同的 html 标签中。 Javascript 和 CSS 导航通过 "slide" div 内部的不同 类。

例如:

<div class="slide active">
  <h1>Slide one</h1>
  <p>Plain text.</p>
  <!-- Background Image 1 -->
</div>
<div class="inverted shadow blurred image slide">
  <h1>Slide two</h1>
  <!-- Background Image 2 -->
  <p><code>class="inverted shadow blurred image slide"</code></p>
</div>
<div class="inverted salmon faded slide">
  <h1>Slide three</h1>
  <!-- Background Image 3 -->
  <p><code>class="inverted faded salmon slide"</code></p>
</div>

如果需要使用 ruby 创建动态迭代,则需要将 div 包装在循环中,如下所示:

<% @job.images.each_with_index do |image, index| %>
    <div class="slide">
       <%= image_tag image %> <! -- Remember that this needs to be a background image -->
    </div>
<% end %>

如果要在滑块中显示图像,则需要将 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>