Как перебирать массив изображений с помощью карусели начальной загрузки

<div class="row">
  <div class="col-md-12">
    <div class="carousel slide" id="myCarousel">
      <% if @room.images[0].medium.url %>
<!-- Indicators -->
        <ol class="carousel-indicators">
          <% @room.images.each do |image| %>
            <li data-target="#myCarousel" data-slide-to="<%= @room.image %>"></li>
              <% end %> 
            </ol>               
          <% end %>     
            <div class="carousel-inner" role="listbox">
              <% if @room.images[0].medium.url %>               
                <% @room.images.each do |image| %>
                  <div class="item <%= 'active' if @room.image == @room.images[0] %>">          
                    <%= image_tag @room.images[0].medium.url %>
                  </div>
                <% end %>   
              <% end %>
            </div>
              <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                 </a>
                   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div>
                </div>
              </div>

Попытка получить изображения, загруженные моими пользователями, для отображения в карусели начальной загрузки.

Изображения присутствуют в моей корзине S3, и я вижу их в своей базе данных, просто не могу заставить их отображаться в карусели.

Если я использую ‹%= image_tag @room.images[0].medium.url %> вне карусели, он отображает первое изображение в массиве, как и ожидалось.

Любые предложения будут приветствоваться, все еще пытаясь встать на ноги с этим.

<script>
$(function(){
  $('#myCarousel').carousel('cycle');
});
</script>

ruby-on-rails bootstrap-carousel
person Lee    schedule 23.05.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В вашем цикле .each есть ошибка.

Замените код следующим

первая петля

<% @room.images.each do |image| %>
  <li data-target="#myCarousel" data-slide-to="<%= image %>"></li>
<% end %>

вторая петля

<% @room.images.each do |image| %>
  <div class="item <%= 'active' if image == @room.images[0] %>">          
    <%= image_tag image.medium.url %>
  </div>
<% end %>

Я надеюсь, что это решит вашу проблему.

person Alex K Jose    schedule 23.05.2016