[英]Bootstrap Carousel in Rails
我正在处理一个文件夹里面有几个图像的项目。 我有Bootstrap正在处理我的项目,并试图使用本教程在旋转木马上工作。 它似乎非常适合我的需求,但我很难将它混合到我的Ruby视图中。 这是我到目前为止所得到的:
<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和我的图像标签所在,但移动它们不会改变任何东西。 我要做的是为每个图像分别绘制一张幻灯片,但是使用当前代码似乎想要将所有图像放在一张幻灯片中。
这部分:
<ol class="carousel-indicators">
<% @patient.images.each do |image| %>
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<% end %>
</ol>
需要改为:
<ol class="carousel-indicators">
<% @patient.images.each_with_index do |image, index| %>
<li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>"></li>
<% end %>
</ol>
而这部分:
<div class="carousel-inner" role="listbox">
<div class="item active">
<% @patient.images.each do |image| %>
<%= image_tag image.image_file.url %>
<% end %>
</div>
</div>
需要像这样:
<div class="carousel-inner" role="listbox">
<% @patient.images.each_with_index do |image, index| %>
<div class="item <%= index == 0 ? 'active' : '' %>">
<%= image_tag image.image_file.url %>
<end>
<% end %>
</div>
请让我知道这对你有没有用。
这就是我做到的方式:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.