Target

After using each method Implement a slide show according to the number of registered images.

- Although we are approaching our goal, we have not yet solved everything. We will update it as soon as it can be resolved.

Development environment

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Premise

[Ruby on Rails] Post image preview function in refile It is OK if the image posting function is available.

Regarding bootstrap4, this article was easy to understand. Use Bootstrap 4 with Rails app

Check the official website

Carousel --Bootstrap 4.1 Japanese Reference

This time in this Attempts to implement using the With indicators method.

- From the conclusion, there is a problem, so we will update it as soon as it can be resolved.

edit view

`app/views/`


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="3000">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <% @post_images.drop(1).count.times do |index| %>
      <li data-target="#carouselExampleIndicators" data-slide-to="#{index}"></li>
    <% end %>
  </ol>
  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <% @post_images.first(1).each do |image| %>
        <%= attachment_image_tag image, :image, class: "carousel_image"  %>
      <% end %>
    </div> 
    <% @post_images.drop(1).each do |image| %>
      <div class="carousel-item">
        <%= attachment_image_tag image, :image, class: "carousel_image" %>
      </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>

Way of thinking

Since the image is written directly on the official website, in order to get closer to this goal The first one is specified as ```

` ``. Therefore, the first one<% @post_images.first(1).each do |image| %>Get in The second and subsequent sheets are acquired using drop (1).

Although it is okay if the indicator part is the number of images, This also requires class = "active", so The second and subsequent sheets are acquired using drop (1).

Bug

1 Although the indicator display and the indicator flow in the slide show are correct, If you click indicator, it will be selected in order from the last image 2 .carousel-fade does not apply → (After deploying to Heroku, it was applied in safari on iphone.)

Summary

If you don't use indicator and carousel-fade, I think this method is suitable. I hope you find it helpful. Also, if there are any improvements, please let me know.

reference

How to use and customize the Bootstrap4 Carousel Bootstrap slideshow on Rails Partial

[Ruby on Rails] Carousel of bootstrap4 is implemented as a slide show using each method.