manyfold/app/views/models/_image_carousel.html.erb

<% unless images.empty? %>
  <div id="imageCarousel" class="carousel slide mb-3" data-bs-ride="carousel" role="group" aria-roledescription="carousel">
    <% if images.count > 1 %>
      <button id="rotationControl" class="carousel-control-play btn btn-secondary m-2">
        <%= icon "pause", t(".play_pause"), id: "rotationControlIcon" %>
      </button>
      <div class="carousel-indicators" role="group" aria-label="<%= translate ".select_slide" %>">
        <% images.each_with_index do |image, index| %>
          <button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="<%= index %>"
            <%= "class=active aria-current=true aria-disabled=true" if index == 0 %>
            aria-label="<%= translate ".slide_label", index: (index + 1), count: images.count, name: image.name %>">
            <%= index %>
          </button>
        <% end %>
      </div>
    <% end %>
    <div id="imageCarouselInner" class="carousel-inner" aria-atomic="false" aria-live="off">
      <% images.each_with_index do |image, index| %>
        <div class="carousel-item <%= "active" if index == 0 %>" role="group" aria-roledescription="slide" aria-label="<%= translate ".slide_label", index: (index + 1), count: images.count, name: image.name %>">
          <%= image_tag model_model_file_path(@model, image, format: image.extension), alt: image.name, class: "d-block w-100 carousel" %>
          <% if @model.preview_file != image && policy(image).edit? %>
            <div class="carousel-caption d-none d-md-block">
              <%= form_with model: @model, class: "d-inline" do |form| %>
                <%= form.hidden_field :preview_file_id, value: image.id %>
                <%= form.button t("models.file.set_as_preview"), class: "btn btn-sm btn-outline-warning" %>
              <% end %>
            </div>
          <% end %>
        </div>
      <% end %>
    </div>
    <% if images.count > 1 %>
      <button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden"><%= t(".previous") %></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden"><%= t(".next") %></span>
      </button>
    <% end %>
  </div>
<% end %>