Как использовать Bootstrap 4 Carousel с Rails 5

Question

У меня проблема с настройкой фотогалереи rails, чтобы она правильно отображалась на новой карусели bootstrap 4.1.Изображения показывают деку из-за того, как они повторяются.Мне не удалось найти решение, которое предоставляет метод, который динамически загружает изображения в карусель.Вероятно, это единственный способ сделать это.

posts_controller.rb

@my_photos = current_user.posts.last(4)

_my_photos_carousel.html.erb

<% @my_photos.each.with_index(0) do |post, index| %>

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="<%= index %>" class="active"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <%= link_to post.photo.url do %>
            <%= image_tag(post.photo.large, class: 'd-block w-100 img-fluid') %>
          <% end %>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  <% end %>

<script type="text/javascript">
  $(document).on('turbolinks:load', function(){
     $('.carousel').carousel({
        interval: 2000
     });
  });
</script>

Answer 1

похоже, что вы сделали кучу каруселей, а не кучу предметов в одной карусели.Я думаю, что это больше, чем вы имели в виду:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <% @my_photos.each.with_index(0) do |post, index| %>
      <li data-target="#carouselExampleIndicators" data-slide-to="<%= index %>" class="<%= index.zero? ? 'active' : '' %>"></li>
    <% end %>
  </ol>
  <div class="carousel-inner">
    <% @my_photos.each.with_index(0) do |post, index| %>
      <div class="carousel-item <%= index.zero? ? 'active' : '' %>">
        <%= link_to post.photo.url do %>
          <%= image_tag(post.photo.large, class: 'd-block w-100 img-fluid') %>
        <% end %>
      </div>
    <% end %>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script type="text/javascript">
  $(document).on('turbolinks:load', function(){
     $('.carousel').carousel({
        interval: 2000
     });
  });
</script>