CODEWITHSUNDEEP
ruby-on-railsajaxbootstrap-4
Johnny C
Johnny C

Reputation: 131

How to use Bootstrap 4 Carousel with Rails 5

I'm having an issue where I setup my rails photo gallery to correctly show on the new bootstrap 4.1 carousel. The images are showing decked, because of how they are being iterated over. I have not been able to find a solution that provides a method that dynamically loads the the images into the carousel. Which is probably the only way that you can do this.

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>

Upvotes: 0

Views: 922

Answers (1)

andrew21
andrew21

Reputation: 640

looks like you made a bunch of carousels rather than a bunch of items in one carousel. I think this is more what you had in mind:

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

Upvotes: 1

Related Questions