[英]bootstrap carousel in ruby on rails
我正在尝试使用 ruby 将我的图像加载到轮播上。 但是,当我输入某个代码时,我得到了一个不需要的图像。 代码如下。
<div class="page-wrap">
<h1> Bikes</h1>
<h2> The best source for bikes!</h2>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<% @products.each_with_index do |product| %>
<li data-target="#myCarousel" data-slide-to="<%= 'product' %>" class="<%= product == 0 ? 'active' : '' %>"></li>
<% end %>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" id="carousel_images">
<% @products.each_with_index do |product| %>
<div class="item<%= " active" if product == @products.first %>">
<% if product.image_url.present? %>
<%= image_tag ("mbx.jpg") %>
<% end %>
<div class="carousel-caption">
<%= product.name %>
</div>
</div>
<div class="item">
<% if product.image_url.present? %>
<%= image_tag (product.image_url) %>
<% end %>
<div class="carousel-caption">
<%= product.name %>
</div>
</div>
<% end %>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
当我将它们直接放入(mbx.jpg)时,它会显示产品。 但是,它不会将它们显示为轮播而是静态的。
此外,这是在开发人员工具中显示不需要的图像的代码,我不知道如何更改它。 我已经使用http://localhost:3000/products/new添加了产品,显然已经有 7 个,但无法显示其中任何一个。
确保您遵循所有Bootstrap 指南。 它应该是这样的:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div>
</div>
</div>
看来您应该将您的item
类重命名为carousel-item
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.