I am trying to load my images onto a carousel using ruby. However, when I enter in a certain code, I get an image that is not desired. Code is below.
<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>
It shows the products when I put them in directly (mbx.jpg). However, it will not show them as a carousel but static.
Also, this is the code that shows up for the unwanted image in developer tools and I am not sure how to change it. I have already added the products using http://localhost:3000/products/new and apparently already have 7 but can't get any of them to show.
Make sure you are following all Bootstrap guidelines . Here is what it should look like:
<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>
It seems you should rename your item
class to carousel-item
.
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.