Question

您好我已经看过类似的问题，但找不到如何在ruby on rails上创建动态bootstrap轮播的教程。我的网站管理员需要能够浏览和上传图片，而不必更改任何代码。我尝试过载波方法但无法使其正常工作。

这是我目前的硬编码旋转木马。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <!-- Slide One - Set the background image for this slide in the line below -->
      <div class="carousel-item active" style="background-image: url('assets/banner2.jpg')">
        <div class="carousel-caption d-none d-md-block">
        </div>
      </div>
      <!-- Slide Two - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('assets/Banner3.png')">
        <div class="carousel-caption d-none d-md-block">
        </div>
      </div>
      <!-- Slide Three - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('assets/SaleHero1.jpg')">
        <div class="carousel-caption d-none d-md-block">
        </div>
      </div>
    </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>

显然，目前如果您想将图像更改为其他内容，则必须通过代码完成。有些人可以指出我正确的方向来完成这项任务。谢谢:)）

Answer 1

假设您可以弄清楚如何使用载波上传图像，您需要在视图中使用ERB。

<% @images.each do |image| %>
  <div class="carousel-item" style="background-image: <%= images.url %>)">
    <div class="carousel-caption d-none d-md-block">
    </div>
  </div>
<% end %>

您需要创建一个类似image.rb的模式，假设您将使用AWS S3存储桶，则需要存储上传的图片。然后，您需要使用代码将图像的网址存储在url

等属性中

然后在您的控制器中，您将需要以下内容：

def index
  @images = Image.all.limit(10) # or however many images you wanna use
end

在Rails 4上添加动态引导程序轮播Ruby

1 个答案: