gpt4 book ai didi

html - Rails 中的 Bootstrap 旋转木马

转载 作者:太空狗 更新时间:2023-10-29 15:28:03 26 4
gpt4 key购买 nike

我正在处理一个文件夹中有多个图像的元素。我让 Bootstrap 在我的元素上工作,并尝试使用 this tutorial 在轮播中工作.它似乎非常适合我的需要,但我无法将它混合到我的 Ruby View 中。到目前为止,这是我得到的:

<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>

让我知道它是否适合你。

关于html - Rails 中的 Bootstrap 旋转木马,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38357072/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com