Bootstrap传送带在Rails中 [英] Bootstrap Carousel in Rails
问题描述
我正在一个文件夹中包含多个图像的项目。我已经让Bootstrap从事我的项目,并尝试使用本教程在轮播中工作。一个>。它似乎很适合我的需求,但是在将其混入Ruby视图时遇到了麻烦。这是到目前为止我得到的:
I'm working a project that has several images inside of a folder. I've got Bootstrap working on my project, and was attempting to work in a carousel using this tutorial. It seems to be an ideal fit for my needs, but I'm having trouble mixing it into my Ruby view. Here's what I've got so far:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<% @patient.images.each do |image| %>
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<% end %>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<% @patient.images.each do |image| %>
<%= image_tag image.image_file.url %>
<% end %>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
我认为我的div和图片标签位于语法/顺序问题上,但是移动它们不会改变任何东西。我想做的是每个图像都有一张单独的幻灯片,但是使用当前代码,似乎要把所有图像放在一张幻灯片中。
I think I've got a syntax/order issue where my divs and my image tags lie, but moving them around doesn't change anything. What I'm trying to do is have a seperate slide for each image, but using the current code it seems to want to put all of the images in one slide.
推荐答案
这是我的工作方式:
<ol class="carousel-indicators">
<% @patient.images.each_with_index do |photo, n| %>
<li data-target='#MyCarousel' data-slide-to="#{n}" class="#{'active' if n == 0}"></li>
<% end %>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<%= image_tag @patient.images.first.image_file.url %>
</div>
<% @patient.images.drop(1).each do |photo| %>
<div class="item">
<%= image_tag photo.image_file.url %>
</div>
<% end %>
</div>
这篇关于Bootstrap传送带在Rails中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!