如何在 Ruby On Rails 中创建轮播图片库

Question

我正在尝试按照“ Rails 中的 Bootstrap Carousel”中的说明创建一个轮播，但无济于事。

对于每篇文章，我将加载一定数量的图像，我希望这些图像在我的展示页面中显示为轮播。

我的 form.html.erb 文件是：

<div class="field">
  <%= form.label :images %>
  <%= form.file_field :images, multiple: true, class: 'form-control'%>
</div>

我的 post.rb 文件是：

class Post < ApplicationRecord
    has_many_attached :images
end

在我的 post_controller.rb 文件中，我有：

def post_params
    params.require(:post).permit(:titolo, :descrizione, images: [])
end

我的 show.html.erb 文件是：

<p id="notice"><%= notice %></p>

<div class='carousel-indicators<%= action_name%>_header'>
  <% (0...@post.images.count).each do |image| %>
      <%= image_tag(@post.images[image]) %>
  <% end %>
</div>

<p>
  <strong>Titolo:</strong>
  <%= @post.titolo %>
</p>
<p>
  <strong>Descrizione:</strong>
  <%= @post.descrizione %>
</p>

我希望我的 carousel 与The Carousel Plugin完全一样。

Answer 1

<!-- application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <title>Rcar</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  </head>
  <body>
    <% @post = Post.first %>
    <div class="container">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <% @post.images.each.with_index do |image, i| %>
            <li data-target="#myCarousel" data-slide-to="<%= i %>" class="<%= 'active' if i == 0 %>"></li>
          <% end %>
        </ol>
        <div class="carousel-inner">
          <% @post.images.each.with_index do |image, i| %>
            <div class="item <%= 'active' if i == 0 %>">
              <%= image_tag(image, alt: SecureRandom.uuid) %>
              <div class="carousel-caption">
                <h3><%= SecureRandom.uuid %></h3>
                <p><%= SecureRandom.uuid %></p>
              </div>
            </div>           
          <% end %>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <% if false %>
     <%= yield %>
    <% end %>
  </body>
</html>

# seeds.rb
# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup).
#
# Examples:
#
#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
#   Character.create(name: 'Luke', movie: movies.first)

# Post.destroy_all

10.times do |t|
  Post.create!(
    titolo: SecureRandom.uuid,
    descrizione: SecureRandom.uuid,
    images: [
              '/home/foobar/upload_testing_files/25585110038_87fdc974b4_k.jpg',
              '/home/foobar/upload_testing_files/a9abe99a4b757585.jpg',
              '/home/foobar/upload_testing_files/27617329949_447f63140e_k.jpg'
            ].map { |path| Rack::Test::UploadedFile.new(path, 'image/jpg') }
  )
end

如何在 Ruby On Rails 中创建轮播图片库

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-07-20 05:55:23

如何在 Ruby On Rails 中创建轮播图片库

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-07-20 05:55:23

解决方案1
0 已采纳 2019-07-20 05:55:23