Ruby on Rails | カルーセル表示 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

Bootstrap 5を使用して写真をカルーセル（スライダー）で表示させる方法を説明します。
Bootstrapのカルーセルコンポーネントを利用することで、簡単にスライダーを作成できます。

コントローラーに以下の記述を追加します。

  def show
    @photos = @report.photos
    @i = 0
  end

「app/views/reports/show.html.erb」ビューにカルーセル表示の記述を追加します。

    <div class="row">

        <div class="col-md-4">
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <% @photos.each do |photo| %>
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="<%= @i %>" class="<%= 'active' if photo.id == @photos[0].id %>" aria-current="true" aria-label="Slide <%= @i+1 %>"></button>
                        <% @i = @i +1 %>
                    <% end %>
                </div>
                <div class="carousel-inner">
                    <% @photos.each do |photo| %>
                        <div class="carousel-item <%= 'active' if photo.id == @photos[0].id %>">
                        <%= image_tag url_for(photo), class: "d-block w-100", style: "border-radius: 10px;", alt: "アマチュアレポートワールドでアマチュア記者が自分の声を世界に届けるために投稿した記事の画像" %>
                        </div>
                    <% end %>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

        </div>

    </div>