我要添加一个 https://bootsnipp.com/snippets/55Z0v将轮播 Bootstrap 至 Rails 应用。
我不想在 Carousel 中显示的图片来自 image.rb
模型。
问题是当我添加逻辑以在轮播中显示图像时,它们会出现在彼此之上。
我不确定该怎么做,但我知道轮播正在显示所选产品的所有图片。
我以前使用过 bootstrap carousels,但只是在纯 html/css 中,所以在 Rails 应用程序中使用它对我来说是新的。
有人可以告诉我如何使图像正常显示吗?
下面是show.html.erb
<div class="container">
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<div class='carousel-outer'>
<!-- me art lab slider -->
<div class='carousel-inner '>
<div class='item active'>
<% @product.images.each do |image_product| %>
<%= image_tag image_product.image.url(:medium), class: "img-responsive", id: "zoom_05" %>
<% end %>
</div>
<script>
$("#zoom_05").elevateZoom({ zoomType : "inner", cursor: "crosshair" });
</script>
</div>
<!-- sag sol -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
<!-- thumb -->
<ol class='carousel-indicators mCustomScrollbar meartlab'>
<li data-target='#carousel-custom' data-slide-to='0' class='active'>
<% @product.images.each do |image_product| %>
<%= image_tag image_product.image.url(:small), class: "img-responsive", id: "zoom_05" %>
<% end %>
</li>
</ol>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".mCustomScrollbar").mCustomScrollbar({axis:"x"});
});
</script>
</div>
最佳答案
如果我没记错的话,问题是图像的所有父级 div
都有类 item active
,并且只必须有 active
类。
另请查看 ol
元素内 li
的 data-slide-to
属性。
<li data-target='#carousel-custom' data-slide-to='0' class='active'> <% @product.images.each do |image_product| %> <%= image_tag image_product.image.url(:small), class: "img-responsive", id: "zoom_05" %> <% end %> </li>
您总是在零位置添加幻灯片。
一定是这样的:
<div class="container">
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<div class='carousel-outer'>
<!-- me art lab slider -->
<div class='carousel-inner '>
<% @product.images.each_with_index do |image_product, index| %>
<div class="<%= index == 0 ? 'item active' : 'item' %>" >
<%= image_tag image_product.image.url(:medium), class: "img-responsive", id: "<%= index == 0 ? 'zoom_05' : '' %>" %>
</div>
<% end %>
<script>
$("#zoom_05").elevateZoom({ zoomType : "inner", cursor: "crosshair" });
</script>
</div>
<!-- sag sol -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
<!-- thumb -->
<ol class='carousel-indicators mCustomScrollbar meartlab'>
<% @product.images.each_with_index do |image_product, index| %>
<li data-target='#carousel-custom' data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>" >
<%= image_tag image_product.image.url(:small), class: "img-responsive", id: "" %>
</li>
<% end %>
</li>
</ol>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".mCustomScrollbar").mCustomScrollbar({axis:"x"});
});
</script>
</div>
在 index == 0
的迭代器中,我检查它是否是设置 active
类的第一张图像。
同样,在 ol
中的 li's
中,我设置了 slide-to
属性。
关于jquery - Rails 应用程序中的 Bootstrap Carousel,显示所有图像但没有缩略图。在 Carousel 中显示来自数据库的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45513272/