Петля изображений с направляющими Semantic UI - PullRequest
Новая
       1

Петля изображений с направляющими Semantic UI

0 голосов
/ 17 июня 2019

Я пытаюсь зациклить некоторые изображения, прикрепленные к сообщению, используя пользовательский пользовательский интерфейс семантического слайдера от здесь .Это то, что я пробовал до сих пор, но он показывает только первое изображение из цикла. 

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

Ответы [ 2 ]

4 голосов
/ 17 июня 2019

Если вы хотите показывать изображения в слайдере, вам нужно переместить 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>
1 голос
/ 17 июня 2019

На самом деле вам нужно добавить каждое изображение внутри другого HTML-тега. Javascript и CSS перемещаются по различным классам внутри 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 %>
...