Rails 中的引导轮播

Question

我正在处理一个文件夹中包含多个图像的项目。我已经让 Bootstrap 处理我的项目，并尝试使用 this tutorial 在轮播中工作。它似乎非常适合我的需求，但我无法将它混合到我的 Ruby 视图中。到目前为止，这是我所得到的：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <% @patient.images.each do |image| %>
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <% end %>
  </ol>

  <!-- Wrapper for slides -->

      <div class="carousel-inner" role="listbox">
       <div class="item active">
        <% @patient.images.each do |image| %>
        <%= image_tag image.image_file.url %>
        <% end %>
        </div>
      </div>


<!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

我认为我的 div 和图像标签存在语法/顺序问题，但移动它们并不会改变任何东西。我想做的是为每张图片制作一张单独的幻灯片，但使用当前代码似乎想将所有图片放在一张幻灯片中。

Answer 1

针对 Rails 6 中的 Bootstrap 5 和 ActiveStorage 图像进行了更新。下面的答案允许通过为每个页面分配一个 id 来将多个轮播添加到同一页面，它还通过添加 data-bs-interval="false" 来删除 Bootstrap 自动滚动

  <div class="row">
    <% @properties.each do |property| %>
      <div class="col-lg-3 col-sm-6 mb-3">

        <!-- carousel -->
        <div id="carousel_<%= property.id %>" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
          <div class="carousel-inner">
            <% property.images.each_with_index do |image, index| %>
              <div id="carousel_item_<%= index %>" class="carousel-item <%= index == 0 ? 'active' : '' %>">
                <%= image_tag image.variant(resize_to_fit: [500,500]), class: 'd-block w-100' %><br>
              </div>
            <% end %>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carousel_<%= property.id %>" 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="#carousel_<%= property.id %>" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
     <% end %>
  </div>

Answer 2

我就是这样做的：

<ol class="carousel-indicators">
   <% @patient.images.each_with_index do |photo, n| %>
     <li data-target='#MyCarousel' data-slide-to="#{n}" class="#{'active' if n == 0}"></li>
   <% end %>
</ol>

<div class="carousel-inner" role="listbox">
  <div class="item active">
    <%= image_tag @patient.images.first.image_file.url %>
  </div>
  <% @patient.images.drop(1).each do |photo| %>
     <div class="item">
       <%= image_tag photo.image_file.url %>
     </div>
  <% end %>
</div>

Answer 3

这部分：

<ol class="carousel-indicators">
  <% @patient.images.each do |image| %>
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <% end %>
</ol>

需要改为：

<ol class="carousel-indicators">
  <% @patient.images.each_with_index do |image, index| %>
    <li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>"></li>
  <% end %>
</ol>

这部分：

<div class="carousel-inner" role="listbox">
 <div class="item active">
  <% @patient.images.each do |image| %>
    <%= image_tag image.image_file.url %>
  <% end %>
 </div>
</div>

需要是这样的：

<div class="carousel-inner" role="listbox">
  <% @patient.images.each_with_index do |image, index| %>     
    <div class="item <%= index == 0 ? 'active' : '' %>">
      <%= image_tag image.image_file.url %>
    <end>
  <% end %>
</div>

让我知道它是否适合你。