I'm trying to create a carousel as explained in " Bootstrap Carousel in Rails " to no avail.
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:
<div class="field">
<%= form.label :images %>
<%= form.file_field :images, multiple: true, class: 'form-control'%>
</div>
My post.rb file is:
class Post < ApplicationRecord
has_many_attached :images
end
In my post_controller.rb file I have:
def post_params
params.require(:post).permit(:titolo, :descrizione, images: [])
end
My show.html.erb file is:
<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 .
<!-- 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.