时间戳

首页 > 解决方案 > Bootstrap Carousel循环通过活动存储图片Rails 6

bootstrap-4 - Bootstrap Carousel循环通过活动存储图片Rails 6

问题描述

我一直在尝试添加一个轮播，它可以检测正在上传的图像并在轮播中相应地显示它们。就像如果我上传 1 它只会显示，如果 2 然后依此类推。我似乎真的不知道该怎么做。我一直在尝试代码后的代码，但它从来没有工作。我想我应该以某种方式循环它们，但我只是无法通过阅读来实现它。

我在想使用轮播之前使用了此代码，但如果我尝试将其放入轮播中，它就不起作用


 <% (0...@ad.photos.count).each do |photo| %>
  <%= image_tag(@ad.photos[photo]) %>
  <% end %>

这是一个简单的轮播

 <div class="container my-4">

    <hr class="my-4">

    <!--Carousel Wrapper-->
    <div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
      <!--Slides-->
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img class="d-block w-100" src=".." alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src=".." alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src=".." alt="Third slide">
        </div>
      </div>
      <!--/.Slides-->
      <!--Controls-->
      <a class="carousel-control-prev" href="#carousel-thumb" 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="#carousel-thumb" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      <!--/.Controls-->
      <ol class="carousel-indicators">
        <li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block w-100"></li>
        <li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" ></li>
        <li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" ></li>
      </ol>
    </div>
    <!--/.Carousel Wrapper-->

我尝试将代码重用到包装器中，但它不起作用

标签： bootstrap-4ruby-on-rails-6

解决方案

以下代码应该可以工作。我认为照片保存在 Cloudinary 中，如果没有，只需更改“img”标签中的代码以正确显示照片。

<% if @ad.photos.size == 1 %>
    <img class="d-block w-100" src="<%= cl_image_path @ad.photos.first.key %>" alt="photo" >

<% elsif @ad.photos.size > 1 %>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <% @ad.photos.size.times do |i| %>
                <li data-target="#carouselExampleIndicators" data-slide-to="<%= i %>" class="<%= "active" if i.zero? %>"></li>
            <% end %>
        </ol>

        <div class="carousel-inner">
            <% @ad.photos.each_with_index do |photo, index| %>
                <div class="carousel-item <%= "active" if index.zero? %>">
                    <img class="d-block w-100" src="<%= cl_image_path photo.key %>" alt="<%= index.ordinalize %> 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>
<% end %>

推荐阅读