带语义的图像循环 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>
我正在尝试使用来自 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>