[英]How to create a carousel photo gallery in Ruby On Rails
I'm trying to create a carousel as explained in " Bootstrap Carousel in Rails " to no avail.我正在尝试按照“ Rails 中的 Bootstrap Carousel”中的说明创建一个轮播,但无济于事。
For each post I'll be loading a certain number of images which I'll like to to be displayed as a carousel in my show page.对于每篇文章,我将加载一定数量的图像,我希望这些图像在我的展示页面中显示为轮播。
My form.html.erb file is:我的 form.html.erb 文件是:
<div class="field">
<%= form.label :images %>
<%= form.file_field :images, multiple: true, class: 'form-control'%>
</div>
My post.rb file is:我的 post.rb 文件是:
class Post < ApplicationRecord
has_many_attached :images
end
In my post_controller.rb file I have:在我的 post_controller.rb 文件中,我有:
def post_params
params.require(:post).permit(:titolo, :descrizione, images: [])
end
My show.html.erb file is:我的 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>
I would like my carousel to be exactly like The Carousel Plugin .我希望我的 carousel 与The Carousel Plugin完全一样。
<!-- 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.