I recently started working with Ruby and decided to use the refile Gem for uploading multiple photos. I wanted to showcase the photos in a Carousel format using Bootstrap carousel. However, when I display the photos, they don't fill the carousel window properly and stick to the left side. This results in the rest of the carousel window remaining blank with the scrolling arrow off the picture. You can see how it's displaying here. I'm unsure about what steps to take next. Here is also a fiddle link: https://jsfiddle.net/farquhar86/3vy2547f/ This is the code snippet from my show page:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<% @ambassador.images.each_with_index do |image, index| %>
<div class="item <%= 'active' if index == 0%>" data-slide-number="<%= index %>">
<%=attachment_image_tag(image, :file, :fill, 600, 600, class: 'img-responsive') %>
</div>
<% end%>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end of carousel-->
Any guidance or alternative methods to achieve the intended result would be greatly appreciated!